bootstrap 3 box-sizing不工作 [英] bootstrap 3 box-sizing not working

问题描述

我认为bootstrap 3使用 box-sizing：border-box 所以当我试图添加一个margin类到2 box-sizing：border-box他们堆叠

I thought bootstrap 3 used box-sizing:border-box so when I tried to add a margin class to the 2 box-sizing:border-box they stack on top of each other instead of sitting next to each other from sm upwards in size.

   <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;

}

推荐答案

code> box-sizing：border-box; 属性不包括元素大小的margin。它包括边框宽度和paddding。这是为什么他们不保持内联。

The box-sizing : border-box; property doesn't include margin in the size of the elements. It includes border width and paddding. That is why they don't stay inline.

border-box

[...]

border-box
The width and height properties include the padding and border, but not the margin.[...]

source： MDN

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

To simulate margin, you can use border with the same colour as the background :

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

这篇关于bootstrap 3 box-sizing不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！