問題描述
填充佔用了額外空間，我希望我的 div 像引導 div 一樣 (padding is taking up extraspaces,i want my div's to act like bootstrap div's)
我製作了四個 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;
}
但是當我查看引導 div 時，讓我們說一下 col‑lg‑4 div。col‑lg‑4 div 的比例為 33.33%，並且左右兩邊的內邊距為 15px，並且仍然適合同一行。我希望我的 div 以同樣的方式行事。我在這裡錯過了什麼？
參考解法
方法 1:
Use box‑sizing: border‑box; on the .abc divs. This will cause the width (and height) calculation to include the border and padding.