折り畳まれたドロップダウンメニュー（ブートストラップ）の行間を変更する

Question

コードを表示するためにこれを編集しました。基本的に私のnavbarがデスクトップ上のフルスクリーンにあるとき、ドロップダウンメニューは正常に動作します。しかし、モバイルでメニューが崩壊すると、メインメニューは上に表示されますが、ドロップダウンはすべてまとめられています。私はそれらの行の高さを変更するように見えることはできません。

screenshot

編集コードを表示する：

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile-nav"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img alt="VDiff" src="wp-content/themes/vdiff/images/logo/vdiff-small.png"></a> 
    </div> 
    <div class="collapse navbar-collapse" id="mobile-nav"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Basics</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Trad</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Trad Basics</a></li> 
      <li><a href="#">Gear</a></li> 
      <li><a href="#">Advanced Skills</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Big Wall</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Trad Basics</a></li> 
      <li><a href="#">Gear</a></li> 
      <li><a href="#">Advanced Skills</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Alpine</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Trad Basics</a></li> 
      <li><a href="#">Gear</a></li> 
      <li><a href="#">Advanced Skills</a></li> 
      </ul> 
     </li> 
     </ul> 

    </div> 
    </div> 
</nav> 

CSS：最初の質問については

.collapse a:link{ 
    color: #EEEEEE; 
    font-family: 'Amatic SC', sans-serif; 
    font-size: 45px; 
    line-height: 45px; 
} 

.navbar { 
    height: 75px; 
    background-color: black; 
    border-radius: 0px; 
    margin-left:0px; 
    margin-right:0px; 

} 

.navbar-brand { 
    padding-left: 50px; 

} 
.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    float: left; 
    min-width: 160px; 
    padding: none; 
    margin: 0; 
    text-align: left; 
    list-style: none; 
    background-color: black; 
    border: none; 
    border: none; 
    border-radius: 4px; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
} 

.navbar-inverse .navbar-toggle { 
    margin-right: 50px; 
    margin-top: 20px; 
    border: none; 
    background: black; 
} 

.navbar-inverse .navbar-toggle:hover, 
.navbar-inverse .navbar-toggle:focus { 
    background-color: black; 
} 

.navbar-inverse .navbar-toggle .icon-bar { 
    background-color: #EEEEEE; 
} 

.navbar-inverse .navbar-collapse, 
.navbar-inverse .navbar-form { 
    border: none; 
    background-color: black; 
} 

`

Answer 1

デスクトップとの違いを作るためのCSSメディアクエリを使用する必要があります&モバイルスタイル。

@media (min-width: 768px) { 
    .collapse a { 
     line-height: 45px; 
    } 
} 

または、例えば、あなたのCSSがタブレットの画面にアップ示すことにしたい場合：

@media (max-width: 768px) { 
    .collapse a { 
     line-height: auto; 
    } 
} 

そしてどれもモバイル用途のために：携帯電話の画面を使用するために例えば

@media (min-width: 768px) and (max-width: 992px) { 
    // Some styles 
} 

詳細を見るHere
2番目の質問では、あなたが何を意味するのか分かりません。もっと詳しく説明するか、jsFiddleを作成してください。

Answer 2

メニュー項目のスペーシングに行の高さの代わりにパディングを使用することをお勧めします。しかし、今ちょうどこのようなドロップダウンメニューでネストされた要素のために行の高さを追加します。

@media (max-width: 768px) { 
    #mobile-nav .dropdown-menu li a { 
     line-height: 45px; 
    } 
}