Twitter Bootstrap：如何實現始終折疊的導航欄下拉菜單？

Question

我在Twitter Bootstrap中使用Navbar組件

http://getbootstrap.com/components/#navbar

我的目標是讓導航欄始終折疊（即使在桌面大小的設備上查看）。 如何才能做到這一點？

到目前為止 ，我已經用我的代碼創建了這個JSFIDDLE - 你會發現它非常標准。 當結果窗口的大小很小時，下拉菜單將折疊。 但是，如果放大結果窗口，則下拉列表不會折疊。

我已經准確地粘貼了JSFiddle中的內容以供參考：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

基本上有兩種方法可以實現您想要的：重新定義與導航欄折疊相關的CSS規則並重新編譯Bootstrap的LESS。

如果你對LESS一無所知，第一種方式似乎更容易，但它確實不是最好的方式。 您必須搜索受折疊導航欄事件影響的所有 CSS規則。 在我的腦海中，我可以想到三個可以改變的規則： .navbar-header ， .navbar-collapse.collapse和.navbar-toggle ：

@media (min-width: 768px)
{
    .navbar-header
    {
        float: none;
    }

    .navbar-toggle
    {
        display: block;
    }

    .navbar-collapse.collapse
    {
        display: none !important;
    }
}

這是一個基於你的小提琴的例子。

另一種方法是更改​​位於variables.less文件中的@grid-float-breakpoint變量。 為此，您必須下載Bootstrap源代碼，並在更改所需的變量后，您必須重新編譯您的LESS。

這可能是實現目標的最佳方式，因為它是一個“全局”解決方案，並且不需要任何CSS覆蓋。

Answer 2

您始終可以創建一個右對齊（ navbar-right ）下拉菜單（ dropdown dropdown-toggle ， dropdown-menu ， dropdown-menu ）菜單，其中包含漢堡包字形（ glyphicon-menu-hamburger ）。

例：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Hamburger 1</a></li>
            <li><a href="#">Hamburger 2</a></li>
            <li><a href="#">Hamburger 3</a></li>
        </ul>
    </li>
</ul>

我不喜歡漢堡包在較小的屏幕上如何左對齊。 除此之外，這是有效的。

Answer 3

我趕緊把這個了：很明顯，所有這些項目需要外移，特別我把一切都在一個<div class="collapse"></div>還是內部nav container我個人用，一切都按預期工作。

相關代碼已添加

aria-expanded="false"

到data-toggle="collapse"鏈接，我從文檔中得到了想法。

Answer 4

我所做的就是去http://getbootstrap.com/customize/ ，讓@ grid-float-breakpoint成為一個非常高的數字，你的屏幕寬度永遠不會達到，下載已編譯的LESS文件並替換你的bootstrap css文件項目。

它基本上表示當你的屏幕寬度達到@ grid-float-breakpoint數字時，菜單將會解開。 一個非常高的數字確保它永遠不會。