我的导航栏和图像之间有一些丑陋的空间。我在网上做了一些研究如何删除它,但没有运气,所以如果你们能给我一个解决方案,我会很高兴。 这是一个响应式网站,所以当我缩小窗口时,图像必须像导航栏那样向下推。
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=""/>
最佳答案
使用 .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="" />
关于html - 导航栏和图像之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35298230/