Navbar折りたたみドロップダウンでテキストが重なっています

Question

私はそこにたくさんのアイテムがあるので、ブートストラップを使用しており、navbarブレークポイントを変更しました。それを減らすために、私はいくつかのドロップダウンを使用し、デスクトップとモバイルで完全に動作しますが、ドロップダウンを開くとタブレットに問題があります。 新しいブレークポイント（991px）とデフォルトのメニュー（991px）の間で、ドロップダウンメニューはその下のコンテンツをモバイルのようにプッシュしませんが、デスクトップのようにオーバーラップします。

これは、私はおそらくそこに何かが欠けて、ブレークポイントを変更するために使用するCSSが、あなたは私の説明に優れた外観を持っているjsfiddleを持っているもの:(

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

であり、ここでアイデアです。 JsFiddle to the problem

Answer 1

あなたのスタイル内の次のCSSを追加します。ここでは

@media (max-width: 991px) { 
    .navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 
} 

は作業抜粋です。

@media (max-width: 991px) { 
 
    .navbar-header { 
 
    float: none; 
 
    } 
 
    .navbar-left,.navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
 
    } 
 
    .navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .collapse.in{ 
 
    display:block !important; 
 
    } 
 
    .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a> 
 
    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">ES</a></li> 
 
      <li><a href="#">EN</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">More</a></li> 
 
     <li><a href="#">Options</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

.drodownメニュークラスのスタイルを適用してみjsfiddle.net/dxfu0hyh/12/ここで更新見つける：ホバー：などを集中、