Question

我认为bootstrap 3使用了box-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;

}

Answer 1

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

border-box
宽度和高度属性包括填充和边界，但不是边际。[...]

来源：MDN

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

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

bootstrap 3 box-sizing无法正常工作

1 个答案: