【问题标题】:Bootstrap Responsive Navbar collapsed only on Phone Mode (No Tablet Mode)Bootstrap 响应式导航栏仅在手机模式下折叠(无平板电脑模式)
【发布时间】:2013-01-29 14:44:27
【问题描述】:

我有一个响应式引导菜单,但我不想在平板电脑模式下折叠它。我尝试在桌面和平板电脑模式下显示相同的菜单。 菜单在 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>

【问题讨论】:

标签: css twitter-bootstrap


【解决方案1】:

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

【讨论】:

    【解决方案2】:
    1. 转到 bootstrap-responsive.css 文件。
    2. 转到第 952 行。
    3. 将最大宽度从 979 像素更改为 768 像素。

    【讨论】:

    • 并非所有平板电脑在纵向模式下都具有 768 像素的逻辑宽度。请考虑这一点。苹果坚持 768 像素,三星坚持 800 像素。
    猜你喜欢
    • 2013-01-29
    • 2014-07-05
    • 2016-01-10
    • 2013-09-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-02
    • 2017-04-12
    相关资源
    最近更新 更多