Bootstrap网格，删除第四列

Question

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

我的问题是它正在放弃第四列。我一直想弄清楚但是我被卡住了。我究竟做错了什么？另外，我只使用网格。手动我摆脱了其余部分。

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

感谢。

Answer 1

您需要从.col-md-3

中删除填充

#tv-player .col-md-3 {
    padding-left: 0;
    padding-right: 0;
}

并将其添加到缩略图：

.thumbnail {
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    margin-bottom: 20px;
}

Answer 2

将以下内容添加到CSS中：

.col-md-3

问题是（例如）*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 类被设置为25％的宽度，所以4 * 25 = 100.但也有5px左右填充，所以（4 * 25％） +（4 * 10px）=超过100％的东西。

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

注意：

在现实世界中，你可能想这样做：

<input type="text" id="{{id-from-an-object-you-bind-to-the-template}}">

请参阅：https://css-tricks.com/international-box-sizing-awareness-day/

Answer 3

下载全新的bootstrap CSS。它似乎对我有用。