2017-01-04 3 views
-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>

+1

あなたは何の問題あなたが '見る' かフィドルやコードスニペット –

+2

を作成することができますか?それをもっとはっきりと説明できますか? –

+0

問題は何ですか?問題から何が問題なのかは明らかではありません。 –

答えて

0

私は.collapseの問題点を考えます。スクリーン< 767.ブーストストラップクラスcollapse以下が適用されます。

.collapse{ 
display:none; 
} 

だから、あなたのULが表示されないと、あなたのHTML内崩壊ボタンを使用していません。

このようなことを試してください。

<!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
\t <!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-2"> 
 
       <div class="navbar-header"> 
 
        Logo 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
       </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>

関連する問題