-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