Bootstrap导航栏对齐想要对齐

问题描述：

我正在尝试将导航栏对齐到右侧。当我使用.pull-right类时，它会将导航栏向右移动太多：“关闭网格”。Bootstrap导航栏对齐想要对齐

我在做什么错？

代码：

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

答

的问题是因为在引导-responsive.css的margin-right设置为0

的jsfiddle一个基本的样机See in browser

所以，你必须为它提供了一些数字看起来合适，像下面：

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

的HTML代码来创建你想要的效果可以写成以下方式：

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

答

尝试把你的pull-right类的div.collapse。这可能会诀窍。

它解决了问题，导航栏像20像素移动到左侧，但超过一半的导航栏仍然在“网格”之外。任何其他建议？ – user1876258 2013-02-28 08:59:57

答

对于任何人到达此地谁在使用引导V3，只需使用附带的.navbar-right列表元素上：

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

答

如果做想拉东西一路电网之外的权利（如选择语言或社交按钮），您可以创建一个简单的课程，并将其添加到<ul class="nav navbar-nav language">，并像.language {right:50px;position:absolute;}那样设计。使用.navbar-brand作为您最左边的标志（反正是来自Art Directors的眼睛）效果非常好。

答

这里为我工作。将pull-right置于div.collapse不起作用 - 它必须位于无序列表类中。

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

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

Bootstrap导航栏对齐想要对齐

相关推荐