padding占用了额外的空间，我想我的div就像bootstrap div一样

Question

我制作了四个div，每个占25％，并将它们浮动到左边。现在，当我给每个div添加填充时，最后一个div不能包含在一行中并向下移动，因为这些div中的每一个都占用了比给定的25％更多的空格，如下所示：

<div class="container">
  <div class="abc">
  </div>
  <div class="abc">
  </div>
  <div class="abc">
  </div>
  <div class="abc">
  </div>
</div>

.container {
  width: 100%;
  height: auto;
}
.abc {
  width: 25%;
  float: left;
  padding: 15px;
}

但是当我查看bootstrap div时，请在col-lg-4 div上说。 col-lg-4 div为33.33％，左右两边的填充也为15px，仍然适合同一行。我希望我的divs以同样的方式行事。我在这里错过了什么？

Answer 1

在box-sizing: border-box; div上使用.abc。这将导致宽度（和高度）计算包括边框和填充。