26

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

未折叠时的菜单

然后菜单折叠宽度小于 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>

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

4

9 回答 9

31

You can customize Twitter Bootstrap css compiling it from sass-twitter-bootstrap scss files and setting $navbarCollapseWidth in _variables.scss to your desired value...

Edit

As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.

于 2013-01-09T00:11:33.050 回答
16

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

于 2012-04-18T06:37:38.647 回答
9

这对我来说效果很好：

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}
于 2013-06-17T00:08:37.323 回答
8

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

  1. 转到Bootstrap 自定义页面
  2. 为硬编码（例如 520px）或较小的屏幕尺寸（如 @screen-xs-min）重新定义 @grid-float-breakpoint 值
  3. 按页面底部的按钮重新编译css文件
  4. 用下载的 zip 文件中的文件替换您的 bootstrap.css 和 bootstrap-min.css 文件。
于 2013-11-29T04:37:55.730 回答
2

查找变量：

@grid-float-断点

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

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

@grid-float-breakpoint: 0px;

于 2015-02-11T07:15:52.350 回答
1

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

@grid-float-breakpoint: 0px;
于 2015-04-06T08:10:26.690 回答
1

这个例子来自官网： 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;
}
于 2013-10-06T15:19:55.377 回答
1

如果您想要做的只是让导航崩溃直到它达到较小的值，最简单的方法是前往Twitter Bootstrap 自定义页面，将 更改为@navbarCollapseWidth您想要的值，然后下载包。完毕。

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

于 2013-07-09T21:10:51.393 回答
0

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

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

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

于 2017-02-04T22:14:20.100 回答