Bootstrap 3 导航栏折叠

Question

有没有办法增加Bootstrap 3导航栏折叠的触发点（即在纵向平板电脑上折叠到下拉菜单中的点）？

这两个适用于Bootstrap 2，但现在不适用！

如何使用Twitter Bootstrap响应式布局更改导航栏折叠点阈值？

更改默认响应式导航栏断点

- timhc22

---

为什么它们不适用？ - PW Kad

我觉得代码本身已经被改变了很多。 - timhc22

我不太明白。你指的是CSS代码吗？类应该基本相同，只需要进行一些小的调整。 - PW Kad

别担心，我觉得我有点混淆了，可能是因为定制化下载的原因（我发布的其中一个答案指定了要编辑的特定行号）。 - timhc22

如果我们可以在未来内联定义它，例如<nav data-sm-collapse="800px"...，那就太好了，因为在构建之前我不知道需要多宽。 - rybo111

Answer 1

今天我遇到了同样的问题。

Bootstrap 4

这是本地功能：https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

您需要使用.navbar-expand{-sm|-md|-lg|-xl}类：

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

将991px更改为1199px，以适应md尺寸。

演示

- Seb33300

---

不得不添加.navbar-collapse.collapse.in { display: block!important; }以防止其消失。不过干得好，节省了我几个小时。 - Dave Forber

很好的替代方案，但必须添加 .navbar-collapse.collapse.in { display: block!important; margin-top: 0px; }。 - Mavis

我喜欢这个的原因是，如果我升级Bootstrap，就不需要担心找变量并重新编译它。 - ScubaSteve

但是下拉菜单仍处于桌面模式，我必须在线编辑代码的第3934行，将max-width更改为992（在bootstrap.css中），我使用的是Bootstrap 3.2。以防有人需要此信息。 - chandan

似乎这个程序没有处理导航栏中dropdown-menu项目的功能。 - alexw

Answer 2

Bootstrap 2和Bootstrap 3的最大区别是，Bootstrap 3是“移动设备优先”的。这意味着默认样式是为移动设备设计的，在导航栏的情况下，默认情况下它是“折叠的”，并且在达到某个最小尺寸时会“展开”。 Bootstrap 3网站上实际上有一个“提示”： http://getbootstrap.com/components/#navbar 引用： 自定义折叠点 根据导航栏中的内容，您可能需要更改导航栏在折叠和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加自己的媒体查询。

如果要重新编译LESS，则可以在variables.less文件中找到该注释LESS变量。它目前设置为"expand"@media(min-width:768px)，根据Bootstrap 3的术语，这是“小屏幕”（即平板电脑）。 @grid-float-breakpoint:@screen-tablet; 如果要保持折叠时间长一点，可以进行以下调整：

@grid-float-breakpoint: @screen-desktop; (992px断点)

或者更早地扩展

@grid-float-breakpoint: @screen-phone (480px断点)

如果您想要更晚地扩展它，而不必重新编译LESS，那么您需要覆盖应用于768px媒体查询的样式，并将其返回到先前的值。然后在适当的时间重新添加它们。

我不确定是否有更好的方法。重新编译Bootstrap LESS以符合您的需求是最好（最简单）的方法。否则，您需要查找影响导航栏的所有CSS媒体查询，将它们覆盖为默认样式@ 768px宽度，然后在更高的最小宽度上将它们恢复为原来的样式。

通过更改变量，重新编译LESS将为您执行所有这些操作。这基本上就是LESS / SASS预编译器的重点。 =）

（注意，我都查看了它们，大约有100行代码，这让我感到烦恼，因此我放弃了这个想法，只是针对特定项目重新编译Bootstrap并避免意外损坏任何东西）

- jmbertucci

---

Bootstrap默认版本和自定义版本有什么区别？ 它们的文件夹结构非常不同，自定义版本只有CSS和JS文件，而默认版本有许多包括LESS在内的文件夹。我有些困惑。 - Rahul Patwa

如果您下载完整的Bootstrap 3 Zip，您将获得所有开发文件。这些是人们用来继续开发Bootstrap的文件，包括Composer和Grunt工作文件、git系统文件、LESS文件等。完整的文件位于/dist文件夹中。您将看到/css、/js、/fonts文件夹。自定义只会给出您选择的编译文件。 - jmbertucci

如果我下载了完整的Bootstrap，然后对一些Less变量进行了更改，那么如何将其编译回CSS文件？ - Rahul Patwa

@RahulPatwa 编译LESS有多种方法。LESS网站从客户端和服务器端两种方法进行了解释。 Crunch是一个简单的GUI工具。 Bootstrap的网站特别推荐使用他们的RECESS工具。还有更多其他方法。 - jmbertucci

最简单的方法就是访问http://getbootstrap.com/customize/，重新定义\@grid-float-breakpoint的值为某个硬编码的大小（例如520px）或更小的屏幕尺寸，例如\@screen-xs-min。请注意，不要改变原来的意思。 - neves

Answer 3

最简单的方法是自定义Bootstrap

查找变量：

 @grid-float-breakpoint

该设置为@screen-sm，您可以根据需要进行更改。 希望能帮到您！

- mshahbazm

---

将此设置为非常小的值，例如1px，将禁用导航栏折叠（例如，如果您想要一个非响应式的导航栏）。 - Gregor Slavec

我还将其设置为“@screen-xs-min”，以将折叠菜单限制在480像素以下。对于某些网站，这很有效，并且可以通过更改方向轻松地从完整菜单切换到折叠菜单，适用于iPhone。 - chiappa

Answer 4

这些内容可以通过变量进行控制，无需在源代码中深度操作。使用Bootstrap时，请尝试使用变量，然后再进行覆盖操作。之后返回并再次尝试使用变量 ;)

我在Rails中使用了bootstrap-sass，但是默认的LESS也一样。

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

就是这样！这个变量参考页面非常方便：https://github.com/twbs/bootstrap/blob/master/less/variables.less

- Doug Lee

---

非常干净。伟大的解决方案。谢谢。 - Jedidiah Hurt

Answer 5

感谢Seb33300，我成功解决了问题。不过，似乎缺少一个重要的部分，至少在Bootstrap版本3.1.1中如此。

我的问题是导航栏在正确的宽度下折叠，但菜单按钮无法使用，我不能展开和折叠菜单。

这是因为collapse.in类被navbar-collapse.collapse中的!important覆盖了，可以通过添加"collapse.in"来解决。Seb33300的示例如下：

@media (max-width: 991px) {
    .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;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

- Daniel

---

完美的标准CSS解决方案适用于Bootstrap 3.3.6，谢谢！ - xxxbence

Answer 6

如果您遇到的问题是菜单拆成多行，您可以尝试以下方法之一：

1）尝试减少菜单项个数或其长度，例如删除菜单项或缩短单词。

2）减小菜单项之间的填充，如下所示：

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

默认的填充是左右两侧各15像素。

如果您想更改每个单独的边，请使用：

padding-left: 7px; 
padding-right: 8px;

此设置也会影响下拉列表。

这并没有回答问题，但对于那些不想深入了解CSS或使用LESS变量的人可能有所帮助。解决此问题的两种常见方法。

- PepitoSolis

Answer 7

我想给jmbertucci的答案点赞并发表评论，但我还没有被授予控制权限。我遇到了同样的问题，并像他说的那样解决了它。如果你使用的是Bootstrap 3.0，请在variables.less文件中编辑LESS变量。响应式断点设置在大约200行左右：

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

然后在大约232行处使用@grid-float-breakpoint变量设置导航栏的折叠值。默认情况下，它设置为@screen-tablet。如果您愿意，可以使用像素值，但我更喜欢使用LESS变量。

- Bastardo Sucio

---

请注意，现在已弃用所有大小设置，只剩下“-min”：@screen-md-min: 800px; @screen-lg-min: 1200px; @grid-float-breakpoint: @screen-md-min; - Doug Lee

Answer 8

我关心的问题是定制Bootstrap后续维护和升级的问题。今天我可以记录下定制步骤，希望未来三年内升级Bootstrap的人能找到文档并重新应用这些步骤（可能在那时是否有效不确定）。我想双方都有各自的论点，但我更喜欢将任何定制内容保留在我的代码中。

然而，我并不太理解Seb33300的方法是如何工作的。当然，在Bootstrap 4.0.3上没有起作用。为了使导航栏在1200而不是768处扩展，必须覆盖两个媒体查询规则，以防止在768处扩展并强制在1200处扩展。

我有一个较长的菜单，在iPad竖屏模式下会换行。以下内容可将菜单保持折叠状态，直到达到1200断点：

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

- cdonner

Answer 9

导航栏在小设备上将会折叠。折叠点由变量@grid-float-breakpoint定义，默认情况下，它是在768px之前。对于屏幕宽度小于768像素的屏幕，导航栏将会呈现如下所示： 可以在variables.less中更改@grid-float-breakpoint并重新编译Bootstrap。在这样做时，您还需要在navbar.less中更改@screen-xs-max。您需要将此值设置为您新的@grid-float-breakpoint-1。请参见：https://github.com/twbs/bootstrap/pull/10465。这是为了将导航栏表单和下拉框在@grid-float-breakpoint处也更改为它们的移动版本。

- Bass Jobsen

---

你如何使用 Stylus？你使用 https://github.com/Acquisio/bootstrap-stylus 吗？如果是的话，你应该按照上述步骤进行操作。下载 bootstrap-styles，更改 stylus/variables.styl 中的设置等，然后重新编译。 - Bass Jobsen

Answer 10

我用CSS的方式安装了Bootstrap 3.0.0，因为我不太熟悉LESS。以下是我添加到自定义CSS文件中的代码（在bootstrap.css之后加载），它使我能够控制菜单始终像手风琴一样工作。
注意：我将整个navbar包装在一个带有类sidebar的div中，以分离出我想要的行为，这样它就不会影响站点上的其他导航栏，如主菜单。根据您的需求进行调整，希望能有所帮助。

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

附加说明：我还对主菜单的切换进行了更改navbar（因为我的网站上面的代码用于侧边栏的“子菜单”）。

我更改了以下内容：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

转换为：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

然后还进行了调整：

<div class="navbar-collapse collapse navbar-collapse">

转换为：

<div class="navbar-collapse collapse navbar-collapse-topmenu">

如果您只有一个`navbar`，我想您不需要担心这个问题，但在我的情况下，它对我有帮助。

- Markus