Twitter Bootstrap，保持菜单对齐到容器宽度

问题描述：

我的问题是如何让导航内容对齐到页面内容宽度，而不是100％。我仍然希望黑色导航背景为100％。你可以用navbar-fixed-top来实现，但我不想让我的导航固定。通常容器会为你做这件事，但在这种情况下它不会自动保留内容。Twitter Bootstrap，保持菜单对齐到容器宽度

我有一个像这样的导航菜单。

<div class="navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 

     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

      <a class="brand visible-phone visible-tablet" href="#">Brand</a> 

      <div class="nav-collapse"> 
       <ul class="nav"> 
        <li class="active"><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
        <li><a href="#">Item 3</a></li> 
       </ul> 

      </div> 

    </div> 
    </div> 
</div><!-- END .navbar -->

尝试遵循[该结构] [1]，并打开类容器流体容器... [1]：http://*.com/questions/21559710/bootstarp-导航栏宽度相同-AS-容器/ 24288270＃24288270 – 2014-06-18 14:31:34

答

我想通了，所以如果有人需要知道这里的解决方案。我将我的整个导航包裹在＃navbar-top id中。建议这样做，以免在全局范围内覆盖Bootstrap。

@media (min-width: 1200px) { 
    #navbar-top .container { 
     width:1170px; 
    } 
} 
@media (min-width: 979px) and (max-width: 1200px) { 
    #navbar-top .container { 
     width:960px; 
    } 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    #navbar-top .container { 
     width:744px; 
    } 
}

这会强制.container在每个分辨率都有一个宽度，即使导航栏不固定。

Twitter Bootstrap，保持菜单对齐到容器宽度

相关推荐