html - 导航栏和图像之间的空间

Question

我的导航栏和图像之间有一些丑陋的空间。我在网上做了一些研究如何删除它，但没有运气，所以如果你们能给我一个解决方案，我会很高兴。这是一个响应式网站，所以当我缩小窗口时，图像必须像导航栏那样向下推。

Bootstrap

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="home.html">McNiels <span class="glyphicon glyphicon-headphones"></span></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="home.html">Home <span class="glyphicon glyphicon-home"></span></a></li>
                <li class="active"><a href="news.html">News<span class="glyphicon glyphicon-bell"></span> </a></li>
                <li><a href="music.html">Music <span class="glyphicon glyphicon-music"></span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
   </div>
</nav>

<img class="img-responsive" src="eminem.jpg" alt=""/>

Answer 1

使用 .navbar { margin-bottom: 0; }.请参阅工作示例代码段。

.navbar.navbar-inverse {
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="home.html">McNiels <span class="glyphicon glyphicon-headphones"></span></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="home.html">Home <span class="glyphicon glyphicon-home"></span></a>
        </li>
        <li class="active"><a href="news.html">News<span class="glyphicon glyphicon-bell"></span> </a>
        </li>
        <li><a href="music.html">Music <span class="glyphicon glyphicon-music"></span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


<img class="img-responsive" src="http://placehold.it/2350x550/f00" alt="" />