附加导航栏和下面的内容之间的空白答案

【问题标题】：Empty space between affix navbar and content below附加导航栏和下面的内容之间的空白
【发布时间】：2017-05-11 23:25:09
【问题描述】：

我在标题和内容 div 之间添加了导航栏。但是在导航栏和下面的内容 div 之间有大约 20px 的空白空间。导航栏正在工作，滚动时它会粘在顶部，但在不滚动页面时会出现白色间隙。另一个问题是导航栏的颜色，它们不会改变（字体或背景）。

<div id="header" class="container-fluid text-center" >
<h1>Title</h1>
<div class="row">
  <div class="col-sm-6 pull-right bottom">
    <p>"Text"</p>
    <p>text</p>
  </div>
</div>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="659">
<div class="container-fluid">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
      <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Merchandise</a></li>
        <li><a href="#">Extras</a></li>
        <li><a href="#">Media</a></li>
      </ul>
    </li>
  </ul>
 </div>
</nav>

<div class="wrap">
  <div class="container text-center">
    <h2>About</h2>
      <div class="row2">
        <div class="col-sm-12">
          <p>some text</p>
        </div>

CSS

.navbar {
   border-radius: 0 !important;
   -moz-border-radius: 0 !important;
   position: fixed;
   top: 0;
   width: 100%;
   margin-bottom: 0;/*not working*/
   padding-bottom: 0;/*not working*/
 }

.wrap {
   background-color: #000;
   margin-top: 0;/*not working*/
   padding-top: 0;/*not working*/
 }

【问题讨论】：

你能提供一个演示吗？

标签： css

【解决方案1】：

尝试添加“margin-top：-18px;”到“.wrap”。

【讨论】：

您能接受我的评论作为答案吗？谢谢）

【解决方案2】：

.wrap 的解决方法有效，但如果您应用到边距，Max D 的建议实际上更简单。以下对我有用。

nav {
margin: 0px !important;
}

【讨论】：

【解决方案3】：

通过向颜色代码添加 '!important' 解决了导航栏颜色问题。

【讨论】：