Czy lewostronne dopasowanie przycisku paska nawigacyjnego Twitter Bootstrap jest możliwe?

Question

Chciałbym, aby przycisk pojawił się po lewej stronie menu na urządzeniach mobilnych. Czy to możliwe dzięki usłudze Twitter Bootstrap?

Tu jest mój znaczników:

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</nav> 

Bootply demo

Cytując z oficjalnej dokumentacji:

Wyrównaj nav linki, formularze, przyciski lub tekst, używając .navbar -left lub . Klasy narzędziowe .navbar-right. Obie klasy dodadzą zmienną CSS w w określonym kierunku. Na przykład, aby wyrównać linki nawigacyjne, umieść je w oddzielnej klasie z odpowiednią klasą narzędzi.

Klasy te są wersje mixin-ed .pull lewym i prawym .pull, ale oni scoped na zapytania mediów dla łatwiejszej obsługi paska nawigacyjnego elementy całym urządzeniu nadawania rozmiarów.

zrobiłem spróbować pull-left ale obawiam się jako oficjalna dokumentacja wspomina, że ​​navbar-left jest bardziej odpowiednie - patrz wyżej.

Przy okazji navbar-left nie działa dla mnie. Czy powinienem iść dalej i używać pull-left pomimo tego, co mówi dokumentacja?

Answer 1

<button type="button" class="pull-left navbar-toggle ... 

chodzi o edycję zapytania, nie jestem przekonany, że navbar-left został przeznaczony do użytku dla przycisku przełączania. Zawiera wyraźne instrukcje stylu, które zastępują to, co robi navbar-left.

Jeśli nie chcesz go używać, jednak można zrobić dodając to do niestandardowego arkusza stylów:

.navbar-toggle.navbar-left { 
    float: left; 
    margin-left: 10px; 
} 

Demo

Answer 2

można użyć "pull-lewo", ale ciebie może trzeba dodać lewe dopełnienie do paska ikon, używając "dopełnienia do lewej" do elementu div "navbar-header". Zobacz przykład poniżej:

<nav class="navbar navbar-default"> 
         <div class="container-fluid"> 
         <div class="navbar-header" style="padding-left: 10px"> 
          <button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button>   
         </div> 
         <div class="collapse navbar-collapse" id="myNavbar"> 
          <ul class="nav navbar-nav">    
           <li><asp:Literal ID="litMenuBar" runat="server"></asp:Literal></li> 
          </ul> 

          <ul class="nav navbar-nav navbar-right"> 
           <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>    
          </ul> 
         </div> 
         </div> 
        </nav>