第二個自舉導航條在菜單欄和移動菜單內容之間有差距

我目前首次使用引導程序（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>

感謝您提供任何幫助。

來源

2017-03-04 Boardy

考慮的款式一般聲明：

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

這會告訴：用0填充和0保證金爲你的網頁上的所有元素。

這可能會解決問題。另外，在調試的時候，這是一個很好的把戲臨時設置

border: solid black 1px;

兩個菜單，看看哪一個是造成差距。我會將這一行添加到兩種樣式，並取決於差距來自哪裏 - 已排除故障。

來源

2017-03-04 23:57:36 Kate

謝謝我已經試過了，但沒有喜悅。我已經在它周圍放置了一個邊框，顯示邊框就在藍色部分的下方，我試過把margin 0和padding 0設置爲導航欄和容器，但是沒有你 – Boardy

它只發生在移動設備上嗎？ – Kate

是的，只有屏幕截圖中顯示的面板顯示在移動設備上，桌面上只顯示標準水平導航欄 – Boardy

第二個自舉導航條在菜單欄和移動菜單內容之間有差距

回答

相關問題