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

Question

我正在尝试使用 twitter bootstrap 做一个网站。我的菜单相对较少，所以它也适合 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>

我知道这与引导程序中的媒体查询有关，但无法理解。

Answer 1

这是我用于引导程序 3.3.4 的内容。这是一个 hack，但也不是 2 天的修复重做 css。

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

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

Answer 2

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

编辑

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

Answer 3

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

@grid-float-breakpoint: 0px;

Answer 4

查找变量：

@grid-float-breakpoint

设置为@screen-sm，你可以根据自己的需要更改。

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

@grid-float-breakpoint: 0px;

Answer 5

您需要阅读引导站点上的以下部分：使用媒体查询： http://getbootstrap.com/2.3.2/scaffolding.html#responsive（引导程序 2.3.2） http://getbootstrap.com/getting-started/#disable-responsive（引导程序 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（引导程序 2.3.2）

Answer 6

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

1. 转到Bootstrap customization page
2. 为硬编码（例如 520 像素）或较小的屏幕尺寸（如 @screen-xs-min）重新定义 @grid-float-breakpoint 值
3. 按页面底部的按钮重新编译css文件
4. 用下载的 zip 文件中的文件替换您的 bootstrap.css 和 bootstrap-min.css 文件。

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

如果您只想让导航不折叠直到它达到较小的值，最简单的方法是转到Twitter Bootstrap customization page，将@navbarCollapseWidth 更改为您想要的值，然后下载包.完成。

如果您想在此页面允许的范围之外进行自定义，则必须按照其他答案中的说明进行覆盖或自定义。

Answer 9

这对我很有效：

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