2013-02-27 8 views
17

Próbuję wyrównać pasek nawigacyjny w prawo. Kiedy używam klasy .pull-right, przesuwa ona pasek nawigacyjny zbyt mocno w prawo: "poza siatką".Wyrównanie paska kontrolnego Bootstrap do wyrównania w prawo

Co robię źle?

Kod:

<div class="row"> 
<div class="span3 top_logo"><img src="images/logo_svart.png" width="177" height="60" alt="BETA Team Performance" /></div> 
    <div class="span9"> 
     <div class="navbar navbar-static-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong> 
        </button> 
        <div class="nav-collapse collapse"> 
         <ul class="nav pull-right"> 
          <li class="active"><a href="#">Start</a></li> 
          ... 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Odpowiedz

12

Problem pojawia się, ponieważ w bootstrap-responsive.css margin-right jest ustawiony na 0.

Jsfiddle z podstawowym makieta See in browser

Więc trzeba zapewnić mu pewną liczbę wyglądać właściwe, jak poniżej :

.navbar .nav.pull-right { 
    float: right; 
    margin-right: 98px; /*set margin this way in your custom styesheet*/ 
    } 

Kod html do tworzenia pożądanego efektu można zapisać w następujący sposób:

<div class="conatiner"> 
<div class="row-fluid"> 
    <div class="span2 top_logo"> 
     <img width="177" height="60" alt="BETA Team Performance" src="http://placehold.it/177x60"> 
    </div> 
    <div class="span10"> 
     <div class="navbar navbar-static-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
        <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" 
        type="button"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong> 

        </button> 
        <!-- Everything you want hidden at 940px or less, place within here --> 
        <div class="nav-collapse collapse "> 
         <!-- .nav, .navbar-search, .navbar-form, etc --> 
         <ul class="nav pull-right"> 
          <li class="active"><a href="#">Home</a> 
          </li> 
          <li><a href="#">Link</a> 
          </li> 
          <li><a href="#">Link</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
4

spróbuj umieścić swoją klasę pull-right na div.collapse. To może załatwić sprawę.

+0

dident To rozwiąże problem, jak 20pixels navbar przeniesiony na lewo, ale ponad połowa z paska nawigacyjnego jest jeszcze poza „siatkę”. Wszelkie inne sugestie? – user1876258

51

Na każdy przyjazd tutaj, kto używa Bootstrap v3, wystarczy użyć dołączonego .navbar-right na elemencie listy:

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <!-- … --> 
    </ul> 
</div> 
0

Jeśli zrobić chcą wyciągnąć coś całą drogę w prawo poza siatką (np. wybierz język lub przyciski społecznościowe) możesz utworzyć prostą klasę i dodać do niej styl <ul class="nav navbar-nav language"> i nadać jej styl .language {right:50px;position:absolute;}. Działa bardzo dobrze z użyciem logo .navbar-brand jako logo po lewej stronie (i tak z Art Directors).

0

Ten działał dla mnie. Wstawianie pull-right w div.collapse nie działa - musi znajdować się w niezamontowanej klasie list.

<div class="nav-collapse collapse navbar-responsive-collapse"> 

<ul class="nav navbar-nav pull-right"> 
Powiązane problemy