Bootstrap 3 Navbar Collapse-Java 学习之路

195

有没有办法增加bootstrap 3导航栏崩溃的点（即，它会折叠成纵向平板电脑上的下拉列表）？

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

How to change navbar collapse threshold using Twitter bootstrap-responsive?

Change the default responsive navbar breakpoint

12 回答

142

nabvar将在小型设备上崩溃 . 折叠点由变量中的@ 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中的导航栏形式和下拉列表更改为其移动版本 .

回复于 2024-04-20T12:53:35+08:00

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

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 尺寸 .

Demo

回复于 2024-04-20T12:53:35+08:00

20

Bootstrap 2和Bootstrap 3之间的最大区别在于Bootstrap 3是“移动优先” .

这意味着默认样式是为移动设备设计的，对于Navbars，这意味着它默认为“折叠”，当达到某个最小尺寸时“展开” .

Bootstrap 3的网站实际上有一个"hint"如何做：http://getbootstrap.com/components/#navbar

自定义折叠点根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点 . 自定义@ grid-float-breakpoint变量或添加自己的媒体查询 .

如果're going to re-compile your LESS, you'll在 variables.less 文件中找到所提到的LESS变量 . 它目前被Bootstrap 3术语设置为"expand" @media (min-width: 768px) ，这是一个"small screen"（即平板电脑） .

@grid-float-breakpoint: @screen-tablet;

如果你想让折叠时间再长一点，你可以像这样调整它：

@grid-float-breakpoint: @screen-desktop; （992px断点）

或者尽早扩大

@grid-float-breakpoint: @screen-phone （480px断点）

如果您希望稍后进行扩展，而不是重新编译LESS，则必须覆盖在 768px 媒体查询中应用的样式，并让它们返回到先前的值 . 然后在适当的时候重新添加它们 .

我不确定是否有更好的方法 . 根据您的需要重新编译Bootstrap LESS是最好（最简单）的方法 . 否则，您必须找到影响Navbar的所有CSS媒体查询，将它们覆盖为默认样式@ 768px宽度，然后以更高的最小宽度将其还原 .

通过更改变量，重新编译LESS将为您完成所有神奇的工作 . 这是LESS / SASS预编译器的重点 . =）

（注意，我确实看了他们一切，这是大约100行代码，这对于我放弃这个想法并且只是为给定项目重新编译Bootstrap并且避免意外搞砸事情而烦恼）

我希望有所帮助！

干杯!

回复于 2024-04-20T12:53:35+08:00
329
Easiest way is to customize bootstrap

找到变量：
```
@grid-float-breakpoint
```
设置为@ screen-sm，您可以根据需要进行更改 . 希望能帮助到你！
回复于 2024-04-20T12:53:35+08:00
3
这些都是在变量中控制的，不需要在源代码中捣乱 . 使用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
回复于 2024-04-20T12:53:35+08:00

感谢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;
    }
}

回复于 2024-04-20T12:53:35+08:00

我想对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变量 .

回复于 2024-04-20T12:53:35+08:00

9
如果您遇到的问题是 menu breaking into multiple lines ，您可以尝试以下方法之一：

1）尝试减少菜单项的数量或长度，例如删除菜单项或缩短单词 .

2）减少菜单项之间的填充，如下所示：
```
.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}
```
默认填充为两侧（左侧和右侧）15px .

如果您希望更改每个单独的用户：
```
padding-left: 7px; 
padding-right: 8px;
```
此设置也会影响下拉列表 .

这不能回答这个问题，但它可以帮助那些不想搞乱CSS或使用LESS变量的人 . 解决这个问题的两种常用方法 .
回复于 2024-04-20T12:53:35+08:00

我担心自定义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; }
}

回复于 2024-04-20T12:53:35+08:00

我使用Bootstrap 3.0.0安装了CSS方式，因为我对LESS并不熟悉 . 这是我添加到我的自定义css文件（我在bootstrap.css之后加载）的代码，它允许我控制所以菜单总是像 accordion 一样工作 .
Note: 我将整个 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 的切换中添加了一个更改（因为我网站上面的代码用于侧面的"submenu" .

我变了：

<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 我想你不需要担心这个，但它对我有帮助 .

回复于 2024-04-20T12:53:35+08:00

对于那些想要以低于标准768px（宽度小于768px的宽度）的宽度折叠的人来说，这是需要的css：

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

回复于 2024-04-20T12:53:35+08:00

我想我找到了一个简单的解决方案来改变崩溃断点，只能通过css .

我希望其他人可以证实，因为我没有彻底测试它，我不确定这个解决方案是否有副作用 .

您必须更改以下类定义的媒体查询值：

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

这对我目前的项目有用，但我仍需要更改一些css定义，以便为所有屏幕尺寸正确排列菜单 .

希望这可以帮助 .

回复于 2024-04-20T12:53:35+08:00

Bootstrap 3 Navbar Collapse

12 回答

相关问题