-3
ブートストラップメニューがありますが、画面の幅を変更したいときに問題があります。ブートストラップメニューの幅
たとえば、767 < width of screen < 950
の場合、問題があります。
ul class="nav"
では問題があるようですが、問題を見つけて解決できません。
.static-navbar {
float: right;
}
@media (min-width: 768px){
\t .navbar-collapse.collapse {
\t \t display: block!important;
\t \t height: auto!important;
\t \t padding-bottom: 0;
\t \t overflow: visible!important;
\t }
}
@media (min-width: 768px){
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
.navbar-nav li.drop {
position: relative;
}
@media (min-width: 768px){
.navbar-nav>li {
float: left;
}
}
.nav>li {
position: relative;
display: block;
}
.navbar-nav > li > a {
padding: 40px 15px 38px;
}
.navbar-nav li.drop ul.dropdown {
margin: 0;
padding: 10px;
position: absolute;
top: 100%;
left: 0;
width: 250px;
\t }
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
Logo
</div>
</div>
<div class="col-sm-10 static-navbar">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
<a href="index.html">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="drop">
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li>
<a href="index.html">Lorem Ipsum</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</div><!-- /.container -->
</nav>
あなたは何の問題あなたが '見る' かフィドルやコードスニペット –
を作成することができますか?それをもっとはっきりと説明できますか? –
問題は何ですか?問題から何が問題なのかは明らかではありません。 –