css - 为什么bootstrap中col的宽度包括填充

Question

根据 W3school，heigh 和 width 不包括 padding 和 margin，但是，在 Bootstrap 中，col--，比方说，col-md-3 将设置 width= 25 %，但这包括填充，为什么？

<div class="text-center">
<div class="row">
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
</div>
</div>

每列的宽度为33.33%*行宽=436.67px,

the width of col

the layout of col

根据每个col的布局，我们可以看到实际宽度(436.67px) =padding +内容宽度。我认为内容宽度应该是 436.67px？为什么我错了？

Answer 1

在 bootstrap css 中有一条规则:

* {
    box-sizing: border-box;
}

根据该规则，宽度 是用content width + border + padding 计算的。参见 this article