html - Logo 和菜单的 Bootstrap 标题布局

Question

我正在使用最新的 Bootstrap 版本并尝试实现与下图类似的外观:

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

问题是左侧的 Logo 与第一行和第二行重叠。在不扰乱响应能力的情况下处理此问题的最佳方法是什么。您认为我应该将 Logo 设为绝对 Logo ，还是有其他更好的解决方案。

我目前的代码是这样的:

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

Answer 1

您需要以不同的方式创建 HTML 分组来实现此目的。下面是实现此目的的 fiddle 和代码。

fiddle :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>