-1
ブートストラップのnavbar-defaultはデスクトップで正常に動作しています。しかし、私はモバイルデバイスでチェックインするためにクロムの開発ツールを使用しているときに動作していない、本当に面倒ではないように背景です。ブートストラップのnavbarの崩壊は、デスクトップでは正しく機能しますが、小さなデバイスではうまく機能しません。
これは私のnavbarの私の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);
});
はすでに背景を配置しようとしましたが、私は下の検索ボックスがあり、愚かなアイデアでした。私は、メニュー
任意の提案をクリックすると、それは今どのように見えるかthatsの？
http://jsfiddle.net/DopeAt/r4vL6v1e/
を働いています期待どおりに機能します）。色やカスタマイズを変更したい場合は、特定のテーマの代わりにテーマを使用する必要があります。アイテムを変更したいだけなら、新しいクラスを作成し、それをあなたのアイテムに使用してください。あなたがしていることを正確に知っていない限り、boostrapのデフォルトクラスを変更しようとするのは問題のレシピです。 – ProgrammerV5
はい、あなたは正しい相手です – DopeAt