有什么方法可以增加 bootstrap 3 导航栏折叠的点（即它折叠成纵向平板电脑上的下拉菜单）？
这两个适用于引导程序 2，但现在不适用！
问问题
379096 次
12 回答
345
我今天遇到了同样的问题。
引导程序 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">
引导程序 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
于 2013-11-27T17:42:00.727 回答
142
Bootstrap 2 和 Bootstrap 3 的最大区别在于 Bootstrap 3 是“移动优先”。
这意味着默认样式是为移动设备设计的，在导航栏的情况下，这意味着默认情况下它是“折叠”的，当它达到某个最小尺寸时会“展开”。
Bootstrap 3 的网站实际上有一个关于做什么的“提示”：http: //getbootstrap.com/components/#navbar
自定义折叠点
根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询。
如果您要重新编译 LESS，您会在variables.less文件中找到注明的 LESS 变量。它目前被设置为“扩展” @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，避免意外搞砸）
我希望这会有所帮助！
干杯!
于 2013-08-20T03:40:11.517 回答
34
于 2013-08-28T14:54:07.143 回答
20
这些都是在变量中控制的，无需在源代码中乱七八糟。使用引导程序，首先尝试变量，然后覆盖。然后返回并再次尝试变量；）
我将 bootstrap-sass 与 rails 一起使用，但与默认的 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
于 2014-02-26T18:07:00.513 回答
10
感谢 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;
}
}
于 2014-03-14T09:03:02.367 回答
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 变量。
于 2013-10-24T20:51:14.433 回答
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 变量的其他人。解决这个问题的两种常用方法。
于 2014-06-18T02:51:04.170 回答
3
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 处的导航栏表单和下拉菜单更改为移动版本所必需的。
于 2013-09-22T13:11:42.250 回答
3
我担心自定义 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; }
}
于 2014-05-21T14:51:57.450 回答
1
我在安装 Bootstrap 3.0.0 时采用了 CSS 方式，因为我对 LESS 不太熟悉。这是我添加到自定义 css 文件（我在 bootstrap.css 之后加载）中的代码，它允许我进行控制，因此菜单始终像accordion.
注意：我用类将我的整体包裹navbar在一个 div 中，sidebar以分离出我想要的行为，这样它就不会影响我网站上的其他导航栏，比如主菜单。根据您的需要进行调整，希望对您有所帮助。
/* 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，我想你不需要担心这个，但它对我的情况有所帮助。
于 2013-10-09T19:05:59.403 回答
0
而对于那些想要以小于标准 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;
}
}
于 2014-01-25T12:58:37.987 回答
0
我想我找到了一个简单的解决方案来更改崩溃断点，仅通过 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 定义以正确排列所有屏幕尺寸的菜单。
希望这可以帮助。
于 2014-02-03T12:10:24.777 回答