css - Bootstrap Navbar 意外的底部间距

Question

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

为此，MCVE 非常简单。我觉得答案也一定是这样，但这是我第一次使用 bootstrap，我没有看到。这是一个 bootply .为了完整起见，我将在此处复制 Material 。

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