As a study of adaptive layout on bootstrap , I want to implement the behavior of the blocks as on the site http://aplle.com in the navigation header. In principle, I can implement it on crutches myself, by experimenting with media queries in my own style sheet. But nevertheless, it is interesting how to do this beautifully, using the classes navbar .

Full Screen

mobile version

And now the questions.

  1. If all items are in full screen, implemented as a list, then when creating a menu button, the entire list will be hidden. How to make so that all elements except the left and right would hide?
    1. How to move the menu button to the left, the apple in the center, and the bag to the right. Only with pens, or are there any already ready bootstrap classes for this? Pens know how to do it. Interested in implementation, using bootstrap .

My code is:

 <header class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="responsive-menu"> <ul class="nav navbar-nav" > <li><a href="#">Apple</a></li> <li><a href="#">Mac</a></li> <li><a href="#">Ipad</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">Support</a></li> <li><a href="#">Search</a></li> <li><a href="#">Bag</a></li> </ul> </div> </div> </header>

As you can see all the elements are hidden, under the button and the button is pressed by default to the right.

    2 answers 2

    can do the following.

    1. The first and last elements of the list set the class hidden-xs, so that they hide at a small screen size.
    2. Add in front of the button two links apple and bag with classes visible-xs, so that they are displayed only with a small screen size
    3. To move the button to the left edge of the screen, write the class pull-left
    4. To move the bag button to the right, write the class pull-right
    5. Apple can be centered directly only in custom css

    Thanks to the English language stack-overflow

    http://output.jsbin.com/hijuzet Example.

      Bootstrap has no beautiful solutions to your questions. You will have to do handles and crutches. The most correct solution is beautiful crutches :)

      • Very informative ... - Urmuz Tagizade
      • @UrmuzTagizade A question was asked how to implement it using bootstrap. The answer is given as neither. I personally did not find such opportunities in bootstrap. If you know how to do it without crutches, then your answer will be more informative;) - Ilya Shashilov