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;">