Bootstrap 3导航栏折叠

有什么办法来增加引导3导航栏折叠的点（即，使其折叠成纵向平板电脑上的下拉菜单）？

这两个适用于引导2，但不是现在！

如何使用Twitter引导程序响应更改导航栏崩溃阈值？

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

Answer 1

我今天也有同样的问题。

这是一个简化的CSS解决方案来激活sm大小的崩溃：

@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; } } 

对于md尺寸，只需将991px 1199px 。

演示

Answer 2

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

这意味着默认的样式是为移动设备而设计的，在导航栏的情况下，这意味着默认情况下会“折叠”，当达到一定的最小尺寸时会“展开”。

引导3的网站实际上有一个“暗示”该怎么做： http : //getbootstrap.com/components/#navbar

自定义折叠点

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

如果你要重新编译你的LESS，你会在variables.less文件中找到指定的LESS变量。 目前，它被设置为通过Bootstrap 3“扩展” @media (min-width: 768px) ，这是一个“小屏幕”（即平板电脑）。

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

如果你想保持一段时间的崩溃，你可以像这样调整它：

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

或更快地扩大

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

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

我不确定是否有更好的方法来做到这一点。 根据您的需求重新编译Bootstrap是最好的（最简单的）方式。 否则，您将不得不查找影响Navbar的所有CSS媒体查询，将其覆盖为768px宽度的默认样式，然后以较高的最小宽度恢复它们。

重新编译LESS将通过改变变量来为你做所有的魔术。 这是LESS / SASS预编译器的重点。 =）

（注意，我把它们全部放在一起，大概有100行代码，这足以让我放弃这个想法，只是重新编译一个给定项目的Bootstrap，并避免意外地搞乱了一些东西）

我希望有帮助！

干杯!

Answer 3

最简单的方法是自定义引导

找到变量：

  @grid-float-breakpoint 

它被设置为@ screen-sm，你可以根据你的需要改变它。 希望它有帮助！

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

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

Answer 6

我想对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); 

然后使用@ grid-float-breakpoint变量在第232行左右设置导航栏的折叠值。默认情况下，它被设置为@ screen-tablet 。 如果你想要，你可以使用像素值，但我更喜欢使用LESS变量。

Answer 7

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

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变量的人。 解决这个问题的两种常用方法。

Answer 8

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的导航栏窗体和下拉菜单更改为移动版本。

Answer 9

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

Answer 10

我使用Bootstrap 3.0.0安装了CSS方式，因为我不熟悉LESS。 这里是我添加到我的自定义css文件（我在bootstrap.css后加载），允许我控制的代码，所以菜单总是像accordion一样工作。
注意：我将整个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我想你不需要担心这个，但是对我来说，这帮助了我。

Answer 11

对于那些想要宽度小于标准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; } } 

Answer 12

我想我找到了一个简单的解决方案来改变折叠断点，只能通过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定义，以正确安排菜单的所有屏幕尺寸。

希望这可以帮助。