html - 为什么 Bootstrap 中列周围的边框不环绕内容？

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

这是因为bootstrap添加的box-sizing:border-box

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

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