我意识到在Twitter Bootstrap中的填充已经做了一些死亡,我以前设法在一定程度上实现了它,但是目前我坚持试图让我的三个span4列坐在一个填充的白色背景行上.
我已经尝试了多种方式添加一个额外的,不正当的div,但无济于事.
我努力了：
<div id="mydiv">
<div class="wrap">
<div class="row">
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
</div> <!-- .row -->
</div> <!-- wrap -->
</div> <!-- mydiv -->
并且：
<div id="mydiv" class="row">
<div class="wrap">
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
</div> <!-- wrap -->
</div> <!-- mydiv -->
“wrap”div具有以下CSS：
.wrap {
padding: 35px;
background-color: #F7F7F7;
border: 1px solid #DDD;
}
但是,每一次,行都被推下到下一行,或者根本不包围内容.
我以前设法通过在行之后使用一个不正当的div添加填充,但是这次似乎不起作用.
有人可以指出我的方向正确吗？
谢谢.
解决方法
而不是为样式添加一个额外的div,您应该只向行中添加另一个样式,例如排序填充,并将新样式传递给相应的子项.例如：
CSS
.row-padded {
padding: 35px;
background-color: #F7F7F7;
border: 1px solid #DDD;
}
.row-padded .span4 {
background-color: #bbb;
width: 30%;
}
HTML
<div id="mydiv" class="container">
<div class="row row-padded">
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
<div class="span4">
<ul>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
<li>Random link</li>
</ul>
</div> <!-- .span4 -->
</div> <!-- .row -->
</div> <!-- container -->
注意：您可能需要为.span4 .row-padded宽度定义一个响应显式值(以px为单位),而不仅仅是宽度百分比.我只用百分比来简洁.