为什么Bootsrap中的列周围的边框不会绕过内容？

Question

W3school声明如下：   - 边框 - 围绕填充和内容的边框

在bootstrap中的列周围添加边框时，边框似乎会向内而不是向外，为什么会这样？

视觉示例：

click here for jsfiddle

Html

<div class="container">

    <div class="row">
        <div class="col-xs-4 border1">First</div>
        <div class="col-xs-4 border2">Second</div>
        <div class="col-xs-4 border3">Third</div>
    </div>
    <div class="row">
        <div class="col-xs-4 bordera">First</div>
        <div class="col-xs-4 borderb">Second</div>
        <div class="col-xs-4 borderc">Third</div>
    </div>
</div>

的CSS

.col-xs-4 {
background-color:grey;
}

.border1 {
border: 1px solid red;
}

.border2 {
border: 1px solid blue;
}
.border3 {
border: 1px solid green;
}

.bordera {
border: 3px solid red;
}
.borderb {
border: 3px solid blue;
}
.borderc {
border: 3px solid green;
}

Answer 1

这是因为引导程序添加的box-sizing:border-box。

尝试将box-sizing: content-box;添加到您的div。

.border1, .border2, .border3, .bordera, .borderb, .borderc{
  box-sizing: content-box;
}