Question

我正在尝试使用twitter bootstrap建立一个网站。我的菜单相对较少，所以它也适合768px显示器。但默认情况下，在引导程序中，菜单会使用媒体查询进行折叠。我无法阻止这种行为。

The menu when not collapsed

Then menu collapses ones width less than 768px

这是我的HTML

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <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>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

我知道它与bootstrap中的媒体查询有关，但无法理解。

Answer 1

您可以从sass-twitter-bootstrap scss文件自定义Twitter Bootstrap css 编译，并将$navbarCollapseWidth中的_variables.scss设置为您想要的值...

修改

正如@Accipheran在评论中所述，对于Bootstrap 3.x，您应该设置的变量名称为$grid-float-breakpoint。

Answer 2

您需要阅读引导网站上的使用媒体查询部分： http://getbootstrap.com/2.3.2/scaffolding.html#responsive（Bootstrap 2.3.2） http://getbootstrap.com/getting-started/#disable-responsive（Bootstrap 3）

您希望在视口缩小时使用相关的媒体查询来覆盖引导程序添加的样式。

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

如果您不希望导航条折叠，请从类名中删除“折叠”。你可能应该摆脱：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

简而言之，请查看文档，这里有一个标题为“可选响应式变体”的部分： http://getbootstrap.com/2.3.2/components.html#navbar（Bootstrap 2.3.2）

Answer 3

这对我很有用：

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}

Answer 4

阅读答案，我相信你在谈论Bootstrap版本2.也许有人在寻找Bootstrap 3的答案。这个答案适合你！

转到Bootstrap customization page
为硬编码的内容（例如520px）或更小的屏幕尺寸重新定义@ grid-float-breakpoint值，例如@ screen-xs-min
按页面底部的按钮重新编译css文件
将您的bootstrap.css和bootstrap-min.css文件替换为下载的zip文件中的文件。

Answer 5

找到变量：

<强> @网格浮子断点

设置为@ screen-sm，您可以根据需要进行更改。

如果覆盖vendor less文件，请将变量设置为0px，例如：

@ grid-float-breakpoint：0px;

Answer 6

如果您想要做的只是在达到较小的值之前没有导航崩溃，最简单的方法是转到Twitter Bootstrap customization page，将@navbarCollapseWidth更改为您想要的值，并下载包。完成。

如果您想要自定义超出此页面允许的范围，您将必须覆盖或自定义，如其他答案中所述。

Answer 7

此示例来自官方网站：http://getbootstrap.com/examples/non-responsive/

更改位于non-responsive.css，但与.navbar相关的重要部分是：

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

Answer 8

如果要完全禁用折叠导航栏，请在自定义LESS文件中添加此变量：

@grid-float-breakpoint: 0px;

Answer 9

这是我用于bootstrap 3.3.4的内容。这是一个黑客，但它也不是为期两天的修复重做css。

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

您可能需要调整选择器，但基本上，将标题设为全宽，然后向右显示和浮动按钮。

防止菜单在768px显示CSS媒体查询中折叠

9 个答案: