在 Bootstrap 中减少内容之间空间的最简洁方法答案

【问题标题】：Cleanest way of decreasing space between content in Bootstrap在 Bootstrap 中减少内容之间空间的最简洁方法
【发布时间】：2018-11-09 01:42:40
【问题描述】：

我使用 Bootstrap v3 和 AdminLTE。在这里，我想减少每个内容之间的空间。

当我只设置 margin-left 和 margin-right 时，最右边内容的右边距和最左边内容的左边距会受到影响，我不想这样做。实现这一目标的最干净的方法是什么？

【问题讨论】：

【解决方案1】：

您可以使用 :nth-child 选择器，或者我更喜欢使用 flexbox。具体来说，如果将容器设置为justify-content: space-between，它将在每个元素之间创建均匀的间距，但也会将第一个和最后一个元素留在末尾。

我还建议升级到 Bootstrap v4。它好多了，并且包括他们自己的速记 flexbox。

【讨论】：

【解决方案2】：

您可以链接 :not 和 :first-of-type 伪类以将规则应用于除第一个匹配项之外的任何元素。

在您的情况下，您需要将margin-right 应用于:not(:first-of-type)
（或将margin-left 应用于:not(:last-of-type)）。

这可以在下面的简化示例中看到：

.item {
  height: 100px;
  border: 1px solid black;
}

.item:not(:first-of-type) {
  color: red;
}

<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>

【讨论】：