Bootstrap - span中的填充使其更大

时间:2013-05-21 09:05:49

标签: css twitter-bootstrap less padding

    <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填充时显示。使用填充15,first_left变为490px宽而不是460px。这是为什么 ? 另外,如果我想在其中嵌套更多行,是否可以在跨度上填充?

1 个答案:

答案 0 :(得分:1)

box-sizing的默认值为content-box。这不包括paddingpadding扩展了元素的宽度(如果设置)。您需要设置border-box以在元素宽度中包含paddingborders

.left{
    background: url('grille.jpg');
    padding: 15px;
    box-sizing: border-box;
}

现在宽度包括填充和边框。

Read more about box-sizing