如何防止Twitter引导程序在浏览器宽度小于960px宽的情况下折叠顶部导航下拉菜单？

Question

我尝试使用CSS中的各种类最小/最大高度和宽度,但似乎无法阻止顶部导航栏折叠我的下拉菜单.我更喜欢固定宽度,但全屏菜单固定在顶部.下拉列表工作正常,但当我减小浏览器窗口的宽度时,它会崩溃.我已经删除了切换但没有来自bootstrap的爱.以下是bootstrap 2.0的代码:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="brand" href="./index.html">Brand Name&nbsp;</a>
        <ul class="nav">
           <form class="navbar-search">
             <input type="text" class="search-query" placeholder="Search Active Page...">
           </form>
        </ul>

       <ul class="nav pull-right">
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-user icon-white"></i>&nbsp;Pages<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">My Pages</a></li>
                    <li><a href="#">New Page</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Share Your Pages</a></li>
                    <li><a href="#">Page Browswer</a></li>
                  </ul>
              </li> 

               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog icon-white"></i>&nbsp;Settings<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Upload Images</a></li>
                    <li><a href="#">Upload Files</a></li>
                    <li><a href="#">Link Other Accounts</a></li>
                     <li><a href="#">Manage Labels</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Privacy Settings</a></li>
                    <li><a href="#">Help</a></li>
                 </ul>
              </li> 
           <li>&nbsp;&nbsp;<img src="img/small_fb_pic.jpg" vspace="5px"></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               John<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Logout</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
              </ul>
          </li>      


        </ul>  <!-- end left justified menu items -->


    </div>
  </div>
</div>

Answer 1

流体布局的宽度定义包含在css/bootstrap-responsive.css您可以通过简单地更改定义中的min-width和max-width值来更改引导程序将折叠菜单的范围@media.

例如,使在一个窗口导航栏崩溃小于800px更换导航栏相关@media包含的声明max-width: 980px 用max-width: 800px.做同样的事情min-width.在写这篇文章的时候,这些变化发生在上线105,281以及381使得各行改为如下所示(他们现在可能是不同的):

105: @media (min-width: 768px) and (max-width: 800px) { ... }

281: @media (max-width: 800px) { ... }

381: @media (min-width: 800px) { ... }

Answer 2

这是为了网站上的响应式设计，可以根据屏幕尺寸进行调整（特别是在移动设备上）。在这里了解更多：

http://twitter.github.com/bootstrap/scaffolding.html#responsive

要在引导解决方案中修复此问题，请转到引导自定义页面，取消选中响应式布局并重新下载引导文件。

http://twitter.github.com/bootstrap/download.html

在我看来，这比手动编辑引导文件更好。希望这可以帮助。