Nea*_*int 199 css collapse navbar responsive-design twitter-bootstrap
目前,当浏览器宽度降至768px以下时,导航栏将更改为折叠模式.我想将此宽度更改为1000px,因此当浏览器低于1000px时,导航栏将更改为折叠模式.我想在不使用LESS的情况下这样做,我使用手写笔不是很少.
我的问题与此问题相同:Bootstrap 3 Navbar Collapse
但是这些问题的所有答案都解释了如何通过改变LESS变量来做到这一点.我没有处理过LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成.
谢谢!
Zim*_*Zim 378
2018年更新
Bootstrap 4
使用navbar-expand-*类在Bootstrap 4中更改导航栏断点更容易:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm = xs屏幕上的移动菜单<576pxnavbar-expand-md = sm屏幕上的移动菜单<768pxnavbar-expand-lg = md屏幕上的移动菜单<992pxnavbar-expand-xl = lg屏幕上的移动菜单<1200pxnavbar-expand =永远不要使用手机菜单(no expand class) =始终使用移动菜单如果排除navbar-expand-*移动菜单,将使用all宽度.这是所有6个导航栏状态的演示:Bootstrap 4 Navbar示例
您还可以通过添加一个CSS来使用自定义断点(??? px).例如,这里是1300px ..
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4 自定义 Navbar断点
引导4 Navbar断点示例
对于Bootstrap 3.3.x,这是用于覆盖导航栏断点的工作 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 1200px的
工作示例:https://www.codeply.com/go/VsYaOLzfb4(带搜索表单)
注意:以上适用于768px以上的任何内容.如果您需要将其更改为小于768px,则此处的示例小于768px.
Sau*_*hLP 49
您必须为此编写特定的媒体查询,从您的问题,低于768px,导航栏将崩溃,因此将其应用于768px以上且低于1000px,就像这样:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
这将隐藏导航栏折叠,直到默认出现引导程序单元.当崩溃类翻转时,导航栏内部的内部资产将自动隐藏,就像你必须按照你想要的设计设置你的css一样.
fen*_*ngd 45
在bootstrap3中,将此变量@ grid-float-breakpoint更改为您需要的变量.默认值为768px
小智 24
最后通过在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;
}
}
小智 12
我刚刚使用以下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;
}
}
Gon*_*ing 12
在Bootstrap 3 .LESS 源代码中,有一个在variables.less被调用@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;
tro*_*ish 11
更改引导变量的Sass方法实际上记录在bootstrap-sass github页面上.
只需在@import bootstrap之前重新定义变量:
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
除了@Skely回答之外,要在导航栏内部设置下拉菜单,还要添加要覆盖的类.最终代码如下:
@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;
}
}
导航栏可以利用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 类在其内容折叠在按钮后面时进行更改。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。
对于永不折叠的导航栏，请在导航栏上添加 .navbar-expand 类。对于总是折叠的导航栏，不要添加任何 .navbar-expand 类。
例如 ：
<nav class="navbar navbar-expand-lg"></nav>
大屏幕显示移动菜单。
参考：https : //getbootstrap.com/docs/4.0/components/navbar/