Bootstrap - 第一个网格和第12个网格列是否可以被20px保证？

Question

我有一个关于bootstrap的有趣问题。

我被要求将我的布局划分为12个网格，以便第一个网格的边距为20px，第12个网格的边距为20px，如下所示：

这可能吗？如果是这样，请告诉我如何实施它？

Answer 1

The Bootstrap grid has been specifically designed so that the container,row and col-*s all work together. If you want to change the spacing outside the outermost columns change the margin on the row instead. Since the container has padding of 15px, and the row has a negative margin of -15px the effective margin of each row is 0. Then you take into account the padding of 15px in each column. So to increase it to 20px on the outside of each row, you would increase the negative row margin by 5px like this...

.row.margin-custom {
   margin-left:-10px;
   margin-right:-10px;
}

Changing it this way it won't break the responsive grid and normal percentage widths of the columns. Adjusting the margin or padding on only the first/last columns will break the grid in various ways.

Demo on Bootply

Answer 2

在Bootstrap中，列具有填充而不是边距。但是如果你想为你的第一个和最后一个col添加保证金。只需添加以下内容：

div[class^="col-"]:first-child {
    padding-left: 20px;
}

div[class^="col-"]:last-child {
    padding-right: 20px;
}

通过上面的例子，第一个和最后一个div包括＆＃34; col - ＆＃34; bootstrap col类的一部分获得这些边距。使用此解决方案，如果您使用＆＃34; col-sm-9＆＃34;，＆＃34; col-md-2＆＃34;则无关紧要。或＆＃34; col-lg-4＆＃34;例如。

祝你好运！ 克里斯

Answer 3

我建议你自定义它。但我不确定你想要什么。 Bootstrap有一个Container类，你的div可以充当包装器 在此测试LayoutIt 您可以根据需要自定义类的默认边距和填充Customize Bootstrap
或者，如果您不想修改默认行为，可以像Chris所说的那样设置特定的css