的標誌和菜單

我使用最新版本的引導和努力實現下面的圖像相似的外觀自舉頭佈局：的標誌和菜單

http://i.imgur.com/Gihxlat.png

的問題是標誌左側有一排重疊和連續兩個。處理這個問題的最佳方法是修復響應。你認爲我應該讓絕對標識還是有其他更好的解決方案？

我到目前爲止的代碼是這樣的：

HTML：

<div class="container"> 
    <div class="col-md-4" id="logo">LOGO</div> 
    <div class="col-md-4" id="search">SEARCH</div> 
    <div class="col-md-4" id="buton">BUTON1 + BUTON2</div> 
    <div class="col-md-8 col-md-offset-4" id="menu">MENU ITEM 01 | MENU ITEM 02 | MENU ITEM 03 |MENU ITEM 04 |</div> 
</div>

CSS：

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
#logo { 
    background-color:gray; 
    height:50px; 
} 
#search { 
    background-color:aqua; 
} 
#buton { 
    background-color:pink; 
} 
#menu { 
    background-color:yellow; 
}

Fiddle Link

來源

2014-11-04 Tan Kucukhas

您需要創建在不同的充HTML分組實現這一目標的方法。下面是實現這個的小提琴和代碼。

小提琴：http://jsfiddle.net/kiranvarthi/se30o1sz/

<div class="container"> 
    <div class="col-md-4" id="logo">LOGO</div> 
    <div class="col-md-8"> 
     <div class="col-md-4 pull-right" id="search">SEARCH</div> 
     <div class="col-md-4 pull-right" id="buton">BUTON1 + BUTON2</div> 
     <div class="clearfix"></div> 
     <div class="col-md-12 text-right" id="menu">MENU ITEM 01 | MENU ITEM 02 | MENU ITEM 03 |MENU ITEM 04 |</div> 
    </div> 
</div>

來源

2014-11-04 04:57:47

你的代碼添加.clearfix下面的標誌和下面的「按鍵1 +按鍵2」：

<div class="clearfix hidden-md></div>

JS小提琴鏈接：Added clearfix

來源

2014-11-04 05:01:55

的標誌和菜單

回答

相關問題