twitter-bootstrap Bootstrap 响应式导航栏仅在电话模式下折叠(无平板电脑模式)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14585535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:12:54  来源:igfitidea点击:

Bootstrap Responsive Navbar collapsed only on Phone Mode (No Tablet Mode)

csstwitter-bootstrap

提问by Gonzalo

I have a responsive bootstrap menu, but I don`t want to collaspe it in tablet mode. I try to dysplay the same Menu in desktop and tablet mode. the menu is collapsed at 940px or less, I want to do it at 768px or less.

我有一个响应式引导菜单,但我不想在平板电脑模式下折叠它。我尝试在桌面和平板电脑模式下显示相同的菜单。菜单折叠在 940 像素或更小,我想在 768 像素或更小处折叠。

Can anyone help me? Thanks

谁能帮我?谢谢

The code:

代码:

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>

回答by frostyterrier

The best way to do it would be to recompile using LESSand change the @navbarCollapseWidth variable from 979px to 768px. If you don't want to use LESS you can use the Customize page on the Bootstrap site to change that variable: http://twitter.github.com/bootstrap/customize.html

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

回答by Ramy Hassan

  1. Go to bootstrap-responsive.css file.
  2. Go to line number 952.
  3. Change the max-width from 979px to 768px.
  1. 转到 bootstrap-responsive.css 文件。
  2. 转到第 952 行。
  3. 将最大宽度从 979 像素更改为 768 像素。