bootstrap 3 box-sizing无法正常工作

Question

我认为bootstrap 3是box-sizing:border-box这样使用的,所以当我尝试在2个盒子大小上添加一个边缘类时: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;

}

Answer 1

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

border-box
width和height属性包括填充和边框,但不包括边距.[...]

来源:MDN

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

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