導航欄和圖像之間的空間

-1

我的導航欄和這種情況下的圖像之間有一些醜陋的空間。我在網上做了一些研究，如何刪除它，但沒有運氣，所以我會很高興，如果你們可以給我一個解決方案。這是一個響應式網站，所以當我縮小窗口時，圖像必須像導航欄一樣按下。導航欄和圖像之間的空間

引導

<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=""/>

來源

2016-02-09 Nicklas Niels Jensen

不應該該圖像在容器div或行嗎？這通常是引導程序的工作方式。 –

使用.navbar {邊距：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="" />

來源

2016-02-09 17:26:38 vanburen

它的工作，但後來我遇到了一個新問題。我想做同樣的事情，但這次它不是一個圖像，而是一個旋轉木馬 –

默認輪播不會有任何不同，然後我的答案中的個別圖像：刪除邊距將其直接放置在導航欄下。除非你有一個可以分享的例子，否則我可以給出這個答案。 – vanburen

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

它沒有完成的工作，但不與轉盤工作。 Thx

來源

2016-02-10 19:52:43

導航欄和圖像之間的空間

回答

相關問題