Question

我正在使用最新的bootstrap版本，并试图在下面的图像中实现类似的外观：

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

Answer 1

您需要以不同的方式创建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>

Answer 2

将.clearfix添加到徽标下方的代码和“按钮1 +按钮2”下方：

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

JS小提琴链接：Added clearfix

徽标和菜单的Bootstrap标题布局

2 个答案: