Самый чистый способ уменьшить пространство между контентом в 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, чтобы применить правила к любому элементу другие , чем первый матч.

В вашем случае вы захотите применить 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>