2013-02-27 16 views
17

Ich versuche, die Navigationsleiste nach rechts auszurichten. Wenn ich die Klasse .pull-right verwende, wird die Navigationsleiste zu weit nach rechts geschoben: "vom Gitter".Bootstrap navbar align will nach rechts ausrichten

Was mache ich falsch?

Code:

<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> 

Antwort

12

Das Problem entsteht, weil in Bootstrap-responsive.css die margin-right auf 0

Jsfiddle mit einer grundlegenden Mockup gesetzt See in browser

So Sie es mit einer gewissen Anzahl zur Verfügung stellen müssen angemessen aussehen, wie unten :

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

der hTML-Code, den gewünschten Effekt erzeugen können auf folgende Weise geschrieben werden:

<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

bereit pull-right Klasse auf den div.collapse setzen. Das mag den Trick machen.

+0

Es dident lösen das Problem, bewegte die Navbar wie 20 Pixel nach links, aber mehr als die Hälfte der Navbar ist immer noch außerhalb der "Grid". Irgendwelche anderen Vorschläge? – user1876258

51

Für alle hier ankommen, wer mit Bootstrap v3, benutzen Sie einfach die mitgelieferte .navbar-right auf der Liste Element:

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

Wenn Sie tun wollen etwas den ganzen Weg nach rechts außerhalb des Gitters ziehen (wie ausgewählte Sprache oder soziale Schaltflächen) können Sie eine einfache Klasse erstellen und hinzufügen, um die <ul class="nav navbar-nav language"> und style it so .language {right:50px;position:absolute;}. Funktioniert sehr gut mit der Verwendung der .navbar-brand als ein Logo zu Ihrer ganz links (von einem Art Directors Auge, jedenfalls).

0

Das hier funktioniert für mich. Putting pull-right in der div.collapse funktioniert nicht - es muss in der ungeordneten Liste Klasse sein.

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

<ul class="nav navbar-nav pull-right"> 
Verwandte Themen