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

Cleanest way of decreasing space between content in Bootstrap

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

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

您可以链接 :not and :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>

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

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