7

I want to add a dropdown to the navbar, but ensure that when the browser is resized to a narrower width, the dropdown remains visible in the navbar and is not included in the nav-collapse.

The html below works. However, when the page resizes, the dropdown drops onto the next row, and displays expanded in the navbar, leaving me with a very deep navbar.

I'm calling bootstrap-collapse.js and bootstrap-dropdown.js.

Anyone got any ideas?

<div class="navbar navbar-fixed-top">
  <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" href="#">Project</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
      <div class="container">
        <ul class="nav pull-right">
            <li class="divider-vertical"></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sharing<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>
            </li>
        </ul>
      </div>
    </div>
  </div>
</div>
4

2 回答 2

11

根据引导程序开发人员之一的 Mark Otto 的说法：

导航栏中 .nav 内的所有下拉菜单都会受到影响。目前我们不提供防止这种行为的方法。

但是，可以在折叠的导航栏中有一个未折叠的下拉菜单。您可以通过以下三种方式之一完成此操作：

  1. 将数据属性添加到下拉列表 ( data-no-collapse="true") 以修复响应式选择器。
  2. 替换下拉列表的类 ( class="dropdown-menu-no-collapse") 以从头开始重建其样式。
  3. 将另一个类添加到下拉列表 ( class="dropdown-menu no-collapse) 以覆盖响应式样式。

我写了一篇博客文章，解释了该怎么做。第一种方法需要编辑bootstrap-responsive.css，第二种方法需要改变bootstrap.css。对于第三种方法，您不必更改任何引导程序的 CSS，但它很难维护。

于 2012-03-16T14:45:31.663 回答
0

这是因为容器被填充到右侧或类似的东西。分别使用margin-right margin-left : -30px; 在最右边，分别是最左边的无序列表。

不是很漂亮，但直到他们修复它......

于 2012-03-14T13:47:59.513 回答