减少Bootstrap中内容之间空间的最干净方法

Question

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

当我只设置margin-left和margin-right时，最右边的内容的右边距和最左边的内容的左边距会受到影响，这是我不希望的。如何做到这一点的最干净的方法？

Answer 1

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

我还建议升级到Bootstrap v4。它要好得多，并包括自己的简写flexbox。

Answer 2

您可以链接 :not 和 :first-of-type 伪类，以将规则应用于除 other 以外的任何元素第一场比赛。

在您的情况下，您需要将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>