CSS 如何使用 Twitter bootstrap-responsive 更改导航栏折叠阈值？

Question

提问by Mark Berry

I'm using Twitter Bootstrap 2.0.1 in a Rails 3.1.2 project, implemented with bootstrap-sass. I'm loading both the bootstrap.cssand the bootstrap-responsive.cssfiles, as well as the bootstrap-collapse.jsJavascript.

我在 Rails 3.1.2 项目中使用 Twitter Bootstrap 2.0.1，通过 bootstrap-sass 实现。我正在加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.jsJavascript。

I have a fluid layout with a navbar similar to the example. This follows the navbar "responsive variation" instructions here. It works fine: if the page is narrower than about 940px, the navbar collapses and displays a "button" that I can click on to expand.

我有一个类似于示例的导航栏的流畅布局。这遵循此处的导航栏“响应变化”说明。它工作正常：如果页面比大约 940 像素窄，导航栏会折叠并显示一个“按钮”，我可以点击它展开。

However my navbar looks good down to about 550px wide, i.e. it doesn't need to be collapsed unless the screen is very narrow.

然而，我的导航栏在大约 550 像素宽时看起来不错，即它不需要折叠，除非屏幕很窄。

How do I tell Bootstrap to only collapse the navbar if the screen is less than 550px wide?

如果屏幕宽度小于 550 像素，我如何告诉 Bootstrap 仅折叠导航栏？

Note that at this point I do notwant to modify the other responsive behaviors, e.g. stacking elements instead of displaying them side by side.

请注意，在这一点上我不希望修改其它响应行为，如堆叠的元素，而不是并排显示他们一边。

Answer 1

采纳答案by methodofaction

You are looking for line 239 of bootstrap-responsive.css

您正在寻找第 239 行 bootstrap-responsive.css

@media (max-width: 979px) {...}

Where the max-widthvalue triggers the responsive nav. Change it to 550px or so and it should resize fine.

该max-width值触发响应式导航的位置。将其更改为 550px 左右，它应该可以很好地调整大小。

Answer 2

回答by Bijan

Bootstrap > 2.1 && < 3

引导程序 > 2.1 && < 3

Use the less version of bootstrap
Change the @navbarCollapseWidth variable in variables.less
Recompile.

使用较少版本的引导程序
更改 variables.less 中的 @navbarCollapseWidth 变量
重新编译。

Update 2013: The easy way

2013 年更新：简单的方法

Visit http://getbootstrap.com/customize/#less-variables
Change @navbarCollapseWidth in the formfield
Click "Compile and Download".

访问http://getbootstrap.com/customize/#less-variables
在表单域中更改 @navbarCollapseWidth
单击“编译和下载”。

(THX to Archonic via comment)

（通过评论 THX 到 Archonic）

Update 2014: Bootstrap 3.1.1 and 3.2(they even added it to the documentation)

2014 年更新：Bootstrap 3.1.1 和 3.2（他们甚至将其添加到文档中）

If you're customizingor overriding/editing .lessvariables, you're looking for:

如果您正在自定义或覆盖/编辑.less变量，您正在寻找：

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Answer 3

回答by Andres Ilich

You can establish a new @mediaquery to drop the navbar elements down as you see fit, all you have to do is reset the former to accommodate your new query with the desired drop width. Take this for example:

您可以建立一个新@media查询以根据需要将导航栏元素放下，您所要做的就是重置前者以适应具有所需放下宽度的新查询。以这个为例：

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

In the following code you can see how I included the original @mediaquery that handles the drop before the 979pxmark and the new query to support your desired drop point of 550px. I modified the original query straight from the bootstrap-responsive css to reset all the styles applied to that specific query for the navbar elements and ported them to the new query that carries the drop point you need instead. This way we can commute all the styles from the original query down to the new query without messing around in the bootstrap-responsive stylesheet, this way the default values will still apply to the other elements in your document.

在下面的代码中，您可以看到我如何包含@media处理979px标记前放置的原始查询和新查询以支持您所需的550px. 我直接从引导响应的 css 修改了原始查询，以重置应用于导航栏元素的特定查询的所有样式，并将它们移植到带有您需要的放置点的新查询。通过这种方式，我们可以将所有样式从原始查询转换为新查询，而不会在引导响应样式表中乱七八糟，这样默认值仍将适用于文档中的其他元素。

Here is a short demo with a media query set to drop at 550pxas you require: http://jsfiddle.net/wU8MW/

这是一个简短的演示，其中媒体查询设置为550px根据需要删除：http: //jsfiddle.net/wU8MW/

Note: I placed the above modified @mediaqueries way down below the css frame as the new modified css is supposed to be loaded first than the responsive css.

注意：我将上述修改后的@media查询放在css 框架下方，因为新修改的 css 应该先加载，而不是响应式 css。

Answer 4

回答by trisweb

bootstrap-sass will support the variable $navbarCollapseWidth in the next version (2.2.1.0). You'll be able to update it to do exactly what you want once that version is live!

bootstrap-sass 将在下一版本（2.2.1.0）中支持变量 $navbarCollapseWidth。一旦该版本上线，您将能够对其进行更新，以完全按照您的意愿行事！

Answer 5

回答by StackOverflowUser

As of August 2013, a Bootstrap 3 "Customize and download" page can be found at http://getbootstrap.com/customize/

截至 2013 年 8 月，可以在http://getbootstrap.com/customize/找到 Bootstrap 3“自定义和下载”页面

With Bootstrap 3, the relevant variable is @grid-float-breakpoint.

对于 Bootstrap 3，相关变量是 @grid-float-breakpoint。

The following Stack Overflow page has additional details: Bootstrap 3 Navbar Collapse

以下 Stack Overflow 页面包含更多详细信息：Bootstrap 3 Navbar Collapse

Answer 6

回答by Tyler

I suspect (and hope) this will be implemented in an official way soon. In the meantime I'm just doing a simple css hack, using visible-phone on the dropdown button and visible-tablet on a second set of buttons I've placed in the navbar. So before it looked like this:

我怀疑（并希望）这将很快以官方方式实施。与此同时，我只是在做一个简单的css hack，在下拉按钮上使用visible-phone，在我放置在导航栏中的第二组按钮上使用visible-tablet。所以在它看起来像这样之前：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <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">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

And now it looks like:

现在它看起来像：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Note that order of elements is important, otherwise you may have issues with elements going into the next line

请注意，元素的顺序很重要，否则您可能会遇到元素进入下一行的问题

Answer 7

回答by mae

I created a separate SCSS file that listed all of the partials that bootstrap needs, that way I can turn the partials on and off depending on what our site needs. This way, I am able to override the breakpoint variable easily. Here's what I got:

我创建了一个单独的 SCSS 文件，其中列出了引导程序需要的所有部分，这样我就可以根据我们网站的需要打开和关闭部分。这样，我就可以轻松覆盖断点变量。这是我得到的：

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Answer 8

回答by pirate694

Here is my code (All other solution showed funky scrollbar as the navbar dropped down so I edited the code so it didn't). I could not post on other answer so I'll do it here for others to find. I am using rails to do this with Bootstrap 3.0.

这是我的代码（所有其他解决方案在导航栏下拉时都显示了时髦的滚动条，所以我编辑了代码，所以它没有）。我无法发布其他答案，所以我会在这里发布供其他人找到。我正在使用 Rails 在 Bootstrap 3.0 中做到这一点。

assets/stylesheets/framework and overrides paste this: (Adjust max width to whatever value to achieve your goal.)

资产/样式表/框架和覆盖粘贴：（将最大宽度调整为任何值以实现您的目标。）

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Answer 9

回答by coding addicted

Bootstrap 3.x

引导程序 3.x

using SASS, you can change the value of $screen-sm to target your min size

使用 SASS，您可以更改 $screen-sm 的值以定位您的最小尺寸

example: $screen-sm: 600px;

例如：$screen-sm: 600px;

You need to put this value in your application.scss file before the @import "bootstrap";

您需要将此值放在您的 application.scss 文件中 @import “bootstrap”之前；

$screen-sm:600px;
@import "bootstrap";

Less variables begin with "@" just changed them to "$" to override them before the import.

以“@”开头的较少变量只是将它们更改为“$”以在导入之前覆盖它们。

Here is the list of variables.

这是变量列表。

Answer 10

回答by jinhr

Bootstrap 4.x

引导程序 4.x

It is a snap to change collapse threshold in Bootstrap 4.x. There are 6 cases:

在 Bootstrap 4.x 中更改折叠阈值非常容易。有6种情况：

Always expand, never collapse (i.e. breakpoint is 0px): <nav class="navbar navbar-expand">...</nav>
Breakpoint is sm(576px): <nav class="navbar navbar-expand-sm">...</nav>
Breakpoint is md(768px): <nav class="navbar navbar-expand-md">...</nav>
Breakpoint is lg(992px): <nav class="navbar navbar-expand-lg">...</nav>
Breakpoint is xl(1200px): <nav class="navbar navbar-expand-xl">.../nav>
Always collapse, never expand (i.e. breakpoint is ∞px). : <nav class="navbar">...</nav>(Just remove the navbar-expand-*class. Mobile-first as in Bootstrap 4.x)

始终展开，永不折叠（即断点为 0px）： <nav class="navbar navbar-expand">...</nav>
断点是sm（576px）：<nav class="navbar navbar-expand-sm">...</nav>
断点是md(768px)：<nav class="navbar navbar-expand-md">...</nav>
断点是lg（992px）：<nav class="navbar navbar-expand-lg">...</nav>
断点为xl(1200px)：<nav class="navbar navbar-expand-xl">.../nav>
总是折叠，从不展开（即断点是∞px）。:(<nav class="navbar">...</nav>只需删除navbar-expand-*该类。在 Bootstrap 4.x 中移动优先）

Credit to this article by Carol Skelly I found https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

归功于 Carol Skelly 的这篇文章，我发现https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

CSS 如何使用 Twitter bootstrap-responsive 更改导航栏折叠阈值？

提问by Mark Berry

采纳答案by methodofaction

回答by Bijan

Bootstrap > 2.1 && < 3

引导程序 > 2.1 && < 3

回答by Andres Ilich

回答by trisweb

回答by StackOverflowUser

回答by Tyler

回答by mae

回答by pirate694

回答by coding addicted

回答by jinhr

相关推荐

最近更新

标签

CSS 如何使用 Twitter bootstrap-responsive 更改导航栏折叠阈值？

提问by Mark Berry

采纳答案by methodofaction

回答by Bijan

Bootstrap > 2.1 && < 3

引导程序 > 2.1 && < 3

回答by Andres Ilich

回答by trisweb

回答by StackOverflowUser

回答by Tyler

回答by mae

回答by pirate694

回答by coding addicted

回答by jinhr

相关推荐

仅使用 flexbox CSS 的水平砌体布局

CSS 设置绝对位置和边距

CSS 如何根据屏幕大小更改背景图像，可能使用 Bootstrap

CSS 使用引导程序激活时如何更改按钮颜色？

相关推荐

最近更新

标签