css - Bootstrap 网格，删除第四列

Question

我正在创建一个最大宽度为 960 像素的四列网格。我进行了自定义下载并将 @container-large-desktop 设置为 (950px + @grid-gutter-width) 和 @grid-gutter-width 到 10px。这就是我想要做的:

我的问题是它删除了第四列。我一直在努力弄清楚，但我被困住了。我究竟做错了什么？此外，我仅使用网格。我手动摆脱了其余部分。

这是我的代码笔:http://codepen.io/labanino/pen/ZQoWem

谢谢。

Answer 1

将以下内容添加到您的 CSS 中:

* {
  box-sizing: border-box;
}

问题是(例如).col-md-3类设置了25%的宽度，所以4 * 25 = 100。而且还有5px的左右padding ，所以 (4 * 25%) + (4 * 10px) = 大于 100%。

为所有元素添加框大小使这样的事情变得容易得多。它基本上意味着填充取自宽度。

注意事项:

在现实世界中，您可能希望这样做:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

参见:https://css-tricks.com/international-box-sizing-awareness-day/