html - 删除两个导航栏之间的底部边距 - bootstrap

Question

我的 Web 应用程序中有两个 navbars。但是，这两个 navbars 之间有一个空格，如下图所示。

我试过 .navbar{margin-bottom: 0px} 但没有成功。

这是我的 HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
  .navbar{margin-bottom: 0px}
</style>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" id="navbar-no-margin">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#" data-toggle="modal" data-target="#signinmodal">Sign in</a></li>
              <li><a href="#" data-toggle="modal" data-target="#signupmodal">Sign up</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-->
    </nav>

    <nav class="navbar navbar-default" id="navbar-no-margin">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#" data-toggle="modal" data-target="#signinmodal">Sign in</a></li>
              <li><a href="#" data-toggle="modal" data-target="#signupmodal">Sign up</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-->
    </nav>

Answer 1

.navbar{margin-bottom: 0px !important}

将 important 添加到规则末尾会覆盖 bootstrap 中 margin-bottom 的默认样式。