2番目のブートストラップnavbarにメニューバーとメニューコンテンツの間にギャップがあります

Question

私は現在ブートストラップ（http://getbootstrap.com）を初めて使用しています。メインメニューとその下のセカンダリメニューのページがあります。

私は、それはほとんど働いてんだけど、携帯で見たとき、私は

下のスクリーンショットに示すように、メニューボタンは、メニューバーやメニューの内容との間にギャップがあります押されメニューの内容は、ナビゲーションバーのすぐ下にあるので、以下

（まだ下の境界を示す）のギャップを取り除くためにしたいことは、私の第二のナビゲーションバーのコードです

<div class="navbar-wrapper" style="padding: 5px;"> 
     <div class="container" style="padding: 5px;"> 

      <nav class="navbar navbar-xs navbar-static-top" style="background-color: #E2DFE5; border: solid thin black; margin: 0;"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#portalNav" aria-expanded="false" aria-controls="navbar" style="margin-top: 0 !important;"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar" style="background-color: black;"></span> 
          <span class="icon-bar" style="background-color: black;"></span> 
          <span class="icon-bar" style="background-color: black;"></span> 
         </button> 
        </div> 
        <div id="portalNav" class="navbar-collapse collapse" style="background-color: #E2DFE5;"> 
         <ul class="nav navbar-nav" style="height: 25px;"> 
          <li><a href="/">Portal Dashboard</a></li> 

         </ul> 

         <ul class="nav navbar-nav navbar-right" style="margin-right: 3px;"> 
          <li><a href="/administrator/logout.php">Logout</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 
    </div> 

ご協力いただきありがとうございます。

Answer 1

は、スタイルのための一般的な宣言を考えてみましょう：

* { 
    padding: 0px; 
    margin: 0px; 
} 

これは教えてくれます：あなたのWebページ上のすべての要素の0パディングとマージン0を使用します。

これで問題が解決する可能性があります。デバッグ時にも、それは一時的にギャップの原因となっている1を参照するために、両方のメニューの

border: solid black 1px;

を設定することが良いトリックです。 私はこのスタイルを両方のスタイルに追加し、ギャップがどこから来ているかに応じてトラブルシューティングを行いました。