Bootstrap Navbar意外的底部間距

Question

這已問過好幾次了。我檢查了幾個不同的答案，並沒有發現任何解決方案。我爲導航欄設置了margin-bottom: 0。我沒有使用固定頂部的導航欄。我的HTML標籤全部關閉。在我看到的問題中，沒有一個解決方案有幫助。

這個MCVE非常簡單。我覺得答案一定是一樣的，但這是我第一次使用bootstrap的經歷，我沒有看到它。這是一個bootply。爲了完整起見，我會在這裏複製資料。

HTML

<!-- Navigation Bar --> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li onclick="navigateToSettings()" id="settingsHeaderItem"><a href="#">Settings</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 

<!-- Content Pane --> 
<div id="contentPane" class="contentPane"> 
    <h1>TEST</h1> 
</div> 

CSS

.navbar { 
    margin-bottom: 0; 
} 

.contentPane { 
    background-color: black; 
} 

結果

Answer 1

您的h1和nav有餘量......並且也使用一個類，因此它不會影響其他每個h1和nav標籤。

h1.someclass { 
    margin-top: 0px; 
} 
nav.someclass { 
    margin-bottom:0px; 
} 

http://www.bootply.com/eVIT3PIaJb

Answer 2

設置display: inline-block和width: 100%到.contentPane CSS類。這將使容器取得孩子的身高。

http://www.bootply.com/nsERfrADNA

Answer 3

你可以嘗試：

<nav class="navbar navbar-default" style="margin-bottom:0px;">