我正在使用twitter bootstrap,我很难弄清楚如何分离主容器div内部的两列的背景颜色,但是它是全宽的。
这是我到目前为止的一个小提琴:http://jsfiddle.net/seeplanet/ZTbwz/
我的主要问题是我想让两列以页面为中心而不是向两侧延伸。这就是我在容器上设置最大宽度的原因。
我的HTML:
<div id="featured-content">
<div class="container">
<div class="row">
<div class="col-sm-9">
Featured Video or Image Gallery
</div>
<div class="col-sm-3">
Other Information
</div>
</div>
</div>
</div>
我的CSS:
#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}
.container {
max-width: 960px;
margin:0 auto;
}
.col-sm-9{
width:75%;
float:left;
background:yellow;
}
.col-sm-3{
width:25%;
float:left;
}
}
这就是我希望它的样子:
答案 0 :(得分:1)
将display:table;
添加到您的容器中,如下所示:
.container {
max-width: 360px; /* If I remove this, then it works, but then my content is not centered */
margin:0 auto;
display:table;
}
JS小提琴
http://jsfiddle.net/grrenier/3TE4X/1/
试试另一个JS小提琴: