Bootstrap Navbar意外的底部间距

Question

这已经被问过几次了。 我检查了几个不同的答案，但都没有找到解决方法。 我已经将margin-bottom: 0设置margin-bottom: 0导航栏。 我没有使用固定式导航栏。 我的HTML标记已全部关闭。 我所看到的问题中的解决方案都没有帮助。

为此，MCVE非常简单。 我觉得答案也必须是这样，但这是我第一次使用Bootstrap，但我没有看到它。 这是靴子 。 为了完整起见，我将在此处复制材料。

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

将.contentPane css类设置为display: inline-block和width: 100% 。 这将使容器占据孩子的身高。

http://www.bootply.com/nsERfrADNA

Answer 3

你可以试试 ：

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