試圖把標誌圖像上方的全寬菜單

Question

我開始學習bootstrap和我在這裏有疑問。

我想有一個完整的寬度菜單，在這個菜單上方，我想要我的標誌。

我已經有了像我想要的菜單，但是我的圖像在菜單內，我想要上面的圖像。

而且我知道這是因爲我在菜單div中有圖像，但我也希望我的圖像在<div class="container">之內，因爲我研究了這個div內的元素保持居中。這是我的目標。

我已經嘗試過通過上述<div class="row navbar">但沒有工作的代碼像我想：

<div class="span3"> 
     <div class="area_logo"> 
      <a href="index.php"> 
      <img src="logo.png" class="logo" alt="logo" width="527" height="72"> 
      </a> 
     </div> 

與引導先進經驗有任何人都可以給一個幫助？

我的HTML：

<div class="row navbar"> 
      <div class="span9"> 
       <ul class="nav nav-pills"> 
        <li class="active"><a href="#" title"Home">Inicio</a></li> 
        <li ><a href="#" title"Home">Home</a></li> 
        <li ><a href="#" title"Home"Home</a></li> 
        <li ><a href="#" title"Home">Home</a></li> 
        <li ><a href="#" title"Home">Home</a></li> 
        <li ><a href="#" title"Home">Home</a></li> 
       </ul> 
      </div> 
    </div> 
</div> 

我的CSS：

body{ font-size:100%; padding:0;} 

/*TOP*/ 
.top{background:blue; height:50px; width:100%;} 
.top .area_logo{position:relative; } 
.top .logo {position:absolute; top:0; left:0;} 

我的代碼小提琴：

http://jsfiddle.net/ritz/s6ZPm/8/

我想要什麼，但在div容器內，以在其他設備上始終圍繞： Deftones的就像是一個標誌和菜單下面的深色背景：■

Answer 1

這真的很難給出任何真正的反饋，因爲沒有顯示你的菜單代碼，but is this what you're looking for?

你真正需要做的是將圖像放置在容器內，或者直接內部ŧ他的導航欄本身。請記住，當菜單坍塌你需要稍微調整定位，因爲你有這樣的事情：

幸運的是，這是一個簡單的解決。您可以通過在logo上設置浮動來控制此操作，以便菜單在其旁邊環繞。我已經在這個場景中引入了媒體查詢。您還需要調整按鈕的位置。這可以通過調整一點保證金來實現。一旦這樣做了，你要找好：

希望這有助於。