Question

这是我的情况：http://codepen.io/gkos/pen/LxmrMP?editors=1100

<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="navbar-text">Item</li>
        <li class="navbar-text">Item</li>
        <li class="navbar-text">Item</li>
        <li class="navbar-text">Item</li>
      </ul>
    </div>
  </nav>
</header>
<div class="site-content container-fluid">
  <div class="row">
      <div class="col-md-9">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <div class="col-md-3 site-sidebar">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
  </div>
</div>

<footer>
  <div class="container-fluid">
    <div class="row navbar navbar-default">
      <div class="col-md-4"><p class="navbar-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
      <div class="col-md-4"><p class="navbar-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
      <div class="col-md-4"><p class="navbar-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    </div>
  </div>
</footer>

我有一个导航栏，一个带有两个碰撞的容器流体。导航栏和容器之间有一个间隙显示为蓝色（正文背景颜色），我该如何删除它，以便列背景颜色从导航栏填充到没有间隙的页脚？我知道边缘翘曲但我找不到任何边缘豆应用....

在网站内容类中使用负边距我可以消除这个差距，但我必须以像素为单位对间隙高度进行硬编码，这似乎不是正确答案！

.site-content
  margin-top: -21px

此致

Answer 1

navbar类在bootstrap css中有一个默认的margin-bottom:20px。您可以通过添加以下内容来覆盖它：

.navbar {
    margin-bottom: 0px;
}

N.B。：确保上述css属性低于bootstrap默认css。

Answer 2

你的问题是导航栏类，它增加了20px的底部边距，使用需要将.nav栏中的margin-bottom设为0

如何消除导航栏和容器流体之间的差距？

2 个答案: