在Bootstrap導航欄上方添加全寬圖像

我想在導航欄上方插入圖像，但是它不適合我。這裏是我的html：在Bootstrap導航欄上方添加全寬圖像

<div class="wrapper" /> 
    <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav"> 
      <li class="active"> 
      <a class="brand" href="#">Home</a> 
      </li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div>

和我的CSS：

.wrapper { 
    background-image: url(../assets/bridge.jpg); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 100%; 
    height: 250px; 
}

每當我添加一個div或其任何內容，它被推到頁面的頂部。我可以添加填充，但是當我開始調整屏幕大小時，它會中斷並在圖像和導航欄中留下間隙。任何幫助都會很棒。

來源

2013-05-04 jhamm

入住這http://jsfiddle.net/LunMH/ – PSL 2013-05-04 17:50:49

給一個合適的回答，所以我可以接受它。我仍然找不到有什麼不同。你做了什麼？ – jhamm 2013-05-04 17:55:05

好吧，我已經寫了正確的解釋..檢查.. – PSL 2013-05-04 18:01:04

<div />表示在HTML 5中的<div>，而不是在XHTML中的<div></div>。 Div的無效自閉標籤。

Ref

Demo

<div class="wrapper"></div> 
<div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav"> 
      <li class="active"> 
      <a class="brand" href="#">Home</a> 
      </li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div>

來源

2013-05-04 18:00:47 PSL

問題是在.wrapper結尾/>，因爲它是不允許的（取決於你的文檔類型）。刪除它，並像</div>像其他divs，我認爲它會起作用。

來源

2013-05-04 17:50:21

在Bootstrap導航欄上方添加全寬圖像

回答

相關問題