<div class="row">
<div id="cover" class="span12"></div>
</div>
<div class="row">
<div id="first_left" class="span6 left">
<h3>aa</h3>
</div>
<div id="first_right" class="span5">
ee
</div>
</div>
更少:
#cover{
background: url('couv.jpg') no-repeat;
width: 960px;
height: 280px;
}
h3{
color: #212121;
font-size: 18px;
font-weight: normal;
float: left;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 1px 2px 2px #FFF;
}
.left{
background: url('grille.jpg');
padding: 15px;
}
“first_right”跨度显示在 first_left 下方,并且仅当存在 15px 填充时。使用 padding 15,first_left 变为 490px 宽而不是 460px。这是为什么 ? 另外,如果我想在其中嵌套更多行,可以在跨度上填充吗?
最佳答案
box-sizing
的默认值为 content-box
。这不包括 填充
。 padding
扩展元素的宽度(如果已设置)。您需要设置 border-box
以在元素宽度中包含 padding
和 borders
。
.left{
background: url('grille.jpg');
padding: 15px;
box-sizing: border-box;
}
现在宽度包括填充和边框。
关于css - Bootstrap - 跨度填充使其更大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16666082/