-1
Bootstrap navbar-default在桌面環境中正常工作並很好。但是,當我使用chrome的開發工具來檢查移動devive是不是工作,是不是像背景雜亂。Bootstrap導航欄摺疊在桌面上正常工作,但在較小的設備上不能正常工作
這是我的html和我的導航欄中的css。
HTML代碼
<div data-affix="" data-fix-at-screen="top" data-clip-at-control="top" data-enable-lg="" data-enable-md="" data-enable-sm="" class="bd-affix-1 navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li><a href="#"#">Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#">Link 1</a>
</li>
<li><a href="#"#">Link 1</a>
</li>
</ul>
<ul class="col-sm-3">
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
</ul>
<ul class="col-sm-3">
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
</ul>
<ul class="col-sm-3">
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
<li><a href="#"#"> Link 1</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Desti</a></li>
<li><a href="#">Deals</a></li>
</ul>
</div>
</div>
<!-- end container -->
</div>
CSS代碼
th {
color:#D5DDE5;;
background:#1b1e24;
font-weight: 100;
text-align: center;
}
tr {
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
td {
padding:20px;
text-align:center;
vertical-align:middle;
font-weight:600;
font-size:12px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}
#menu-container {
float: left;
display: block;
width: 150px;
}
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}
.navbar-default{
background-color: #933e6e;
padding-bottom: 10px;
padding-top: 10px;
margin: 0;
height: 60px;
}
.navbar-nav{
width: 100%;
color: #000;
}
.nav > li {
position: relative;
display: block;
width: 12.5%;
}
.navbar-default .navbar-nav > li > a{
color: #000;
padding-bottom: 10px;
padding-top: 10px;
font-weight: normal;
text-transform: uppercase;
margin-right: 10px;
margin-left: 10px;
border-radius: 0px;
display: block;
white-space: nowrap;
text-align: center;
}
.navbar-default .navbar-nav > li > a:hover{
color: #dddddd;
padding-bottom: 10px;
padding-top: 10px;
font-weight: normal;
text-transform: uppercase;
margin-right: 10px;
margin-left: 10px;
border-radius: 0px;
display: block;
white-space: nowrap;
border-bottom: 2px solid #fff;
text-align: center;
}
.affix{
width: 100%;
right: 0%;
left: auto;
top: 0px;
bottom: auto;
position: fixed;
}
.nav .navbar-li{
margin-right: 20%;
}
.container .row li{
list-style-type: none;
text-align: left;
font-size: 16px;
}
.container .row a:hover{
color: #333;
text-decoration: none;
}
JS代碼
$('#menu-container li').hover(function() {
//show its submenu
$('ul', this).fadeIn(100);
}, function() {
//hide its submenu
$('div ul', this).fadeOut(100);
});
已經嘗試過的地方背景,但我有下面的搜索框,是愚蠢的想法。這就是它的外觀,現在當我點擊菜單
有什麼建議?
http://jsfiddle.net/DopeAt/r4vL6v1e/
您正在移除和更換某些應用到默認項,這就是爲什麼你得到這種行爲(如果您刪除自舉類的你的CSS定製的,你會發現一切按預期工作。)如果您想修改顏色和自定義,則應該使用主題而不是特定的主題。如果你只是想修改一個項目,然後創建一個新的類,並使用該類爲您的項目。嘗試修改boostrap的默認類是一個問題的祕訣:)除非你知道你在做什麼。 – ProgrammerV5
是的,你是正確的伴侶 – DopeAt