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

RESULT

Answer 1

您的 h1 和导航有边距...并且还使用了一个类，因此它不会影响所有其他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;">