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值来更改引导程序折叠菜单的范围1}}定义。

例如，要在小于@media的窗口中使导航栏折叠，请将包含800px的导航栏相关@media声明替换为max-width: 980px。对max-width: 800px执行相同操作。在撰写本文时，这些更改恰好位于min-width，105和281行，以便每行更改为如下所示（现在可能不同）：< / p>

105：381

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

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

Answer 2

有关3个非常有用的解决方案，请参阅此链接： http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

我最终在他的列表中使用选项1 ...基本要点是如果您无法访问.less源，则编辑您的Responsive.less或Responsive.css，如下：

添加：：不使用（数据没有塌= “真”]）

定义了以下类样式。 .navbar .dropdown-menu

（我在responsive.less文件中找到了7个位置）

然后，在您定义html的地方，您需要添加一个属性：

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-user"></i>
        {{ account.FirstName}} {{ account.LastName }}&nbsp;
        <b class="caret"></b>
    </a>

    <ul class="dropdown-menu" data-no-collapse="true">
        <li><a href="/logout.cshtml">Logout</a></li>
    </ul>
</div>

注意无序列表上的data-no-collapse属性。

编辑：现在你的下拉列表不会扩展......

Answer 3

这适用于可以适应屏幕尺寸的网站上的响应式设计（特别是在移动设备上）。点击此处了解更多信息：

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

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

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

这比手动编辑引导文件更好，imo。希望这会有所帮助。

Answer 4

我相信你在谈论Bootstrap版本2.也许有人在寻找Bootstrap 3的答案。这个答案适合你！

转到Bootstrap customization page
为硬编码的内容（例如520px）或更小的屏幕尺寸重新定义@ grid-float-breakpoint值，例如@ screen-xs-min
按页面底部的按钮重新编译css文件
将您的bootstrap.css和bootstrap-min.css文件替换为下载的zip文件中的文件。

Answer 5

转到bootstrap-responsive.css文件
转到第952行
将宽度更改为希望导航栏折叠的宽度

Answer 6

从HTML中删除bootstrap-responsive.css的样式表链接，不再有任何内容会崩溃。

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

6 个答案: