0
我已經嘗試了幾種解決方案,但總是有相同的結果。崩潰斷點已更改,但我看不到該按鈕,因此無法摺疊我的菜單。 我正在使用BS 3.3.7。你能看看代碼嗎?非常感謝!更改boostrap導航欄崩潰斷點
HTML:
<nav class="navbar navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">abc</a></li>
<li><a href="aaa.html">aaa</a></li>
<li class="active"><a href="ccc.html">ccc</a></li>
<li><a href="sss.html">rrr</a></li>
<li><a href="ccc.html">eee</a></li>
<li><a href="vvv.html">sss</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav><!-- /.navbar-->
SCSS
@media screen and (max-width: 991px) {
.navbar .navbar-nav li .dropdown {
width: 100%;
margin-bottom: 30px;
}
.navbar .navbar-nav li .cart {
float: left;
}
.navbar .navbar-header {
margin-top: 0px;
}
.navbar .navbar-header {
width: 100%;
margin: 0px;
}
.navbar .navbar-collapse {
width: 100%;
}
.navbar-toggle {
float: right;
margin-top: 20px;
}
.navbar .navbar-header .navbar-brand {
padding: 5px 15px;
}
.navbar-toggle {
border: 1px solid #e1e1e1;
margin-right: 0px;
.icon-bar {
background: $light;
}
}
.navbar .navbar-top {
float: left;
.cart {
float: left;
width: 100%;
}
.btn-group {
float: left;
width: 100%;
margin-left: 0px;
margin-top: 10px;
.dropdown-toggle {
float: left;
}
}
}
.navbar .navbar-nav {
width: 100%;
float: left;
margin: 0px;
}
.navbar .navbar-collapse {
margin: 0px;
padding: 0px;
}
.navbar .navbar-nav li {
padding: 10px 0px;
}
.navbar .navbar-header .navbar-brand {
padding-left: 0px;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: auto;
}
.navbar .navbar-nav li {
.dropdown {
.dropbtn {
padding-left: 0px;
}
.dropdown-content {
display: block;
position: relative;
box-shadow: none;
background: #fff;
a {
padding-left: 25px;
&:after {
left:5px;
}
}
a:last-child {
padding-bottom: 0px;
&:after {
top: 10px;
}
}
}
}
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: inherit;
overflow-x: hidden;
}
}
是的,這個工程,但通常,它也隱藏按鈕,所以我不能點擊並打開我的菜單,因爲沒有按鈕 – JZK
@JZK看到這個:http://www.bootply.com/Wf53bcAyl8 –
bootply工作的很好,但我仍然有同樣的問題,但最終它是固定的。我把你的代碼和我的代碼(上面的代碼)放在一起,將它設置爲991px,並且一切都很好。儘管我不知道如何))...沒關係,謝謝! ... – JZK