更改bootstrap导航栏折叠断点而不使用LESS
目前，当浏览器宽度降至768px以下时，导航栏将更改为折叠模式。 我想改变这个宽度为1000px，所以当浏览器低于1000像素时，导航栏变为折叠模式。 我想这样做，而不使用LESS，我使用手写笔不less。
我的问题是在这个问题相同： Bootstrap 3导航栏折叠
但是这个问题中的所有答案都解释了如何通过改变LESSvariables来做到这一点。 我一直没有处理LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法可以做到这一点。
谢谢！
你必须为你的问题编写一个特定的媒体查询 ，在768px以下，导航栏将会崩溃，所以应用在768px和1000px以下，就像这样：
@media (min-width: 768px) and (max-width: 1000px) { .collapse { display: none !important; } }
这将隐藏导航栏的崩溃，直到引导单元的默认出现。 当崩溃类翻转导航栏内的内部资产崩溃将被自动隐藏，就像明智的你必须设置你的CSS为您所需的devise。
对于Bootstrap 3.3.x，这里是覆盖navbar断点的工作 CSS。 将991px更改为要让导航栏折叠的点的像素尺寸…
@media (max-width: 991px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } }
991px的工作示例： http ： //www.bootply.com/j7XJuaE5v6
注意：以上的作品超过768px 。 如果您需要将其更改为小于768像素 ， 小于768像素的示例在这里 。
Bootstrap 4（Beta）2017更新
在Bootstrap 4中，使用navbar-expand-*类更改导航栏断点更简单：
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
-
navbar-expand-sm= xs屏幕上的移动菜单<576px -
navbar-expand-md= sm屏幕上的移动菜单<768px -
navbar-expand-lg= md屏幕上的移动菜单<992px -
navbar-expand-xl= lg屏幕<1200px的移动菜单 -
navbar-expand=从不使用手机菜单 -
(no expand class)=总是使用手机菜单
如果您排除navbar-expand-* ，则将以all宽度使用移动菜单。 以下是所有6个导航栏状态的演示： Bootstrap 4 Navbar示例
在bootstrap3中 ，将这个variables@ grid-float-breakpoint改为你所需要的。 默认值是768px
最后解决了如何通过在http://getbootstrap.com/customize/处理'@ grid-float-breakpoint'来改变崩溃宽度。
在bootstrap.css（也是最小版本）中，转到第2923行，并将@media screen and (min-width: 768px) {更改为@media screen and (min-width: 1000px) {
所以代码将最终成为：
@media screen and (min-width: 1000px) { .navbar-brand { float: left; margin-right: 5px; margin-left: -15px; } .navbar-nav { float: left; margin-top: 0; margin-bottom: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { border-radius: 0; } .navbar-nav.pull-right { float: right; width: auto; } .navbar-toggle { position: relative; top: auto; left: auto; display: none; } .nav-collapse.collapse { display: block !important; height: auto !important; overflow: visible !important; } }
在Bootstrap 3 .LESS 源代码中 ，variables中定义了一个variables，名为@grid-float-breakpoint ，它有以下有用的注释：
//**Point at which the navbar becomes uncollapsed @grid-float-breakpoint: @screen-sm-min;
匹配的@grid-float-breakpoint-max值被设置为负1px：
//**Point at which the navbar begins collapsing @grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
解：
因此，只需将@grid-float-breakpoint值设置为1000px，并将bootstrap.less重新设置为bootstrap.css ：
例如
@grid-float-breakpoint: 1000px;
我通过使用下面的CSS代码成功完成了这个任务。
@media(max-width:1000px) { .navbar-collapse.collapse { display: none !important; } .navbar-collapse { overflow-x: visible !important; } .navbar-collapse.in { overflow-y: auto !important; } .collapse.in { display: block !important; } }
更改bootstrapvariables的Sass方法实际上logging在bootstrap-sass github页面上。
只需在@import bootstrap之前重新定义variables即可：
$grid-float-breakpoint: 1000px; @import 'bootstrap';
除了@Skely答案之外，为了让navbar工作下拉菜单 ，还要添加他们的类来重写。 最终代码如下：
@media (min-width: 768px) and (max-width: 991px) { .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; } .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;*/ margin: 7.5px 50px 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; } }
演示代码
在bootstrap v4中，导航可以早晚使用不同的css类来折叠
例如：
- 导航栏，可切换-SM
- 导航栏，可切换-MD
- 导航栏，可切换-LG
用导航button：
- 隐藏-SM-了
- 隐藏-MD机
- 隐藏-LG-了
你最好的select是使用你使用的CSS处理器的端口。
我是SASS的忠实粉丝，所以我现在使用https://github.com/thomas-mcdonald/bootstrap-sass
看起来这里有一个Stylus的叉子： https ： //github.com/Acquisio/bootstrap-stylus
否则，search和replace是你最好的朋友在CSS版本…
对于Bootstrap 3.3，这是唯一你需要的代码：
@media (min-width: 768px) and (max-width: 1000px) { .navbar-collapse.collapse { display: none !important; } .navbar-toggle{ display: block !important; } .navbar-header{ float: none; } }
这对我来说是个诡计：
@media only screen and (min-width:769px) and (max-width:1000px){ .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } .navbar-header .collapse, .navbar-toggle { display:block !important; }
