twitter-bootstrap 更改 bootstrap 3.3.6 导航栏折叠断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34479198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change bootstrap 3.3.6 navbar collapse breakpoint
提问by kev
Currently when the browser width drops below 768px, the .navbarchanges to collapsed mode. I want to change this width to 992px so when the browser is below 992px the .navbarchanges to collapsed mode.. I am using bootstrap 3.3.6
当前，当浏览器宽度低于 768px 时，会.navbar更改为折叠模式。我想将此宽度更改为 992px，因此当浏览器低于 992px 时，.navbar将更改为折叠模式。我正在使用 bootstrap 3.3.6
I am using this code but it doesn't work for me
我正在使用此代码，但它对我不起作用
@media screen and (max-width: 992px) {
.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;
}
}
回答by BigDropGR
I was looking for exactly the same thing and I found this, It works 100%!
我一直在寻找完全相同的东西，我发现了这个，它 100% 有效！
You need to add this css
你需要添加这个css
@media (max-width: 992px) {
.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;
}
}
Also you need this javascript
你也需要这个javascript
$('#monitor').html($(window).width());
$(window).resize(function() {
var viewportWidth = $(window).width();
$('#monitor').html(viewportWidth);
});
If it doesn't work, answer me those questions...
如果它不起作用，请回答我这些问题...
- Do you use navbar-fixed-top ?
- Do you use navbar-inverse?
- 你使用 navbar-fixed-top 吗？
- 你使用导航栏反转吗？
Take a look at my html code it might help you...
看看我的 html 代码，它可能对你有帮助...
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- This is the main nav menu content -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav hover-effect">
<li><a href="#header">Home</a></li>..........
回答by sjokkogutten
The recommended approach is to use Bootstrap's 'Customize and download' function to customize Bootstrap to your requirement.
推荐的方法是使用 Bootstrap 的“自定义和下载”功能来根据您的要求自定义 Bootstrap。
Alternatively you could change your media query, but you might end up overriding a bunch of classes:
或者，您可以更改媒体查询，但最终可能会覆盖一堆类：
@media (min-width: 768px) and (max-width: 992px) {
.collapse {
display: none !important;
}
}
回答by Sarhad Salam
This works, and the navbar collapses at 992px with the css code below:
这是有效的，导航栏在 992px 处折叠，下面的 css 代码如下：
@media (min-width: 992px) {
.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.navbar-right .dropdown-menu-left {
left: 0;
right: auto;
}
}
@media (min-width: 992px) {
.navbar-header {
float: left;
}
}
@media (min-width: 992px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
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;
}
}
@media (min-width: 992px) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
@media (min-width: 992px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
@media (min-width: 992px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
@media (min-width: 992px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 992px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
@media (min-width: 992px) {
.navbar-form {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (min-width: 992px) {
.navbar-text {
float: left;
margin-left: 15px;
margin-right: 15px;
}
}
@media (min-width: 992px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-right ~ .navbar-right {
margin-right: 0;
}
}
回答by avnaveen
I have tried the following code with bootstrap 3.3.6 and it works.
我已经在 bootstrap 3.3.6 中尝试了以下代码并且它有效。
@media (max-width: 996px) {
.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;
}
}
Please check this jsfiddle
请检查这个jsfiddle
