我正在使用最新的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;
}
答案 0 :(得分:0)
您需要以不同的方式创建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>
答案 1 :(得分:0)