Bootstrap 3 盒子大小调整不起作用

我以为使用了 bootstrap 3box-sizing:border-box因此，当我尝试向 2 个 box-sizing:border-box 添加边距类时，它们彼此堆叠在一起，而不是从 sm 向上的尺寸彼此相邻。

   <div class="blueBox col-sm-6">
            <input type="checkbox">foo</input>
        </div>
        <div class="blueBox col-sm-6" >
            <input type="checkbox">boo</input>
        </div>

css

.blueBox {
  background-color: #26a8e0;
  color: white;
  height: 100px;
  margin: 20px;
  box-sizing: border-box;
  padding: 20px;

}

The box-sizing : border-box;属性不包括元素大小的边距。它包括边框宽度和填充。这就是为什么他们不保持内联。

边框
宽度和高度属性包括填充和 边框，但不是边距。[...]

来源 ：MDN https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values

要模拟边距，可以使用与背景颜色相同的边框：

.blueBox {
  background-color: #26a8e0;
  color: white;
  height: 100px;
  border: 20px solid #fff;
  box-sizing: border-box;
  padding: 20px;
}