Question

我有一个响应式引导程序菜单，但我不想在平板电脑模式下进行collaspe。我尝试在桌面和平板电脑模式下播放相同的菜单。菜单折叠在940px或更低，我想以768px或更低的速度完成。

任何人都可以帮助我吗？感谢

代码：

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

      <!-- I want to display this code only in Phone mode-->
      <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 name</a>

      <!-- This  part is hidden (collapsed) at 940px or less
           But I want to collapse it at 768px or less!!!!
      -->
      <div class="nav-collapse collapse">
           <!-- menu items -->
      </div>

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

Answer 1

最好的方法是使用LESS重新编译，并将@navbarCollapseWidth变量从979px更改为768px。如果您不想使用LESS，可以使用Bootstrap站点上的Customize页面来更改该变量：http://twitter.github.com/bootstrap/customize.html

Answer 2

转到bootstrap-responsive.css文件。
转到第952行。
将最大宽度从979px更改为768px。

Bootstrap Responsive Navbar仅在电话模式下折叠（无平板电脑模式）

2 个答案: