Bootstrap 3导航栏折叠

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

这两个适用于引导2,但不是现在!

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

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

我今天也有同样的问题。

这是一个简化的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

演示

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,并避免意外地搞乱了一些东西)

我希望有帮助!

干杯!

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

找到变量:

  @grid-float-breakpoint 

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

这些都是在变量控制,不需要在源代码中弄脏。 用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

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

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

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

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

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

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

我使用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我想你不需要担心这个,但是对我来说,这帮助了我。

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

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

希望这可以帮助。