更改引导3.3.6导航栏折叠断点

当前浏览器宽度下降到768px以下时，.navbar更改为折叠模式。我想这个宽度更改为992px，所以当浏览器低于992px的.navbar变为收缩状态..我用引导3.3.6更改引导3.3.6导航栏折叠断点

我使用这个代码，但它不工作对我来说

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

来源

2015-12-27 kev

什么是“它不为我工作”的实际含义，因为上面的代码不会完成你的问题问什么。 – vanburen

是的，但它不起作用在我的项目中，我不知道为什么 – kev

然后，你应该花时间发布相关代码（HTML等）和任何其他有关您工作环境的信息。 – vanburen

推荐的方法是使用Bootstrap的'Customize and download'函数来根据您的需求定制Bootstrap。

或者你可以改变你的媒体查询，但你可能最终覆盖了一堆类：

@media (min-width: 768px) and (max-width: 992px) { 
    .collapse { 
     display: none !important; 
    } 
}

来源

2015-12-27 11:49:31 sjokkogutten

感谢的人，我想我会尝试下载一个自定义bootstrap：D – kev

这工作，和导航栏在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; 
    } 
}

来源

2015-12-27 14:36:10

谢谢你，但它不适合我：/我试了很多代码，但我不能修复：/ – kev

我一直在寻找完全一样的东西，我发现this，它工作100％！

您需要添加这个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; 
} 
}

你也需要这个JavaScript

$('#monitor').html($(window).width()); 

    $(window).resize(function() { 
    var viewportWidth = $(window).width(); 
$('#monitor').html(viewportWidth); 
});

如果它不工作，我回答这些问题...

待办事项你使用navbar-fixed-top？
你使用navbar-inverse？

看看我的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>..........

来源

2015-12-29 09:39:11 BigDropGR

我试图与引导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; 
} 
}

请检查该jsfiddle

来源

2016-03-22 12:06:48 avnaveen

更改引导3.3.6导航栏折叠断点

回答

相关问题