Как удалить левый / правый отступ начала / конца строки?

Question

У меня есть ряд карт определенного размера, с водосточным желобом между ними.Проблема в том, что водосточный желоб также применяется с обеих сторон каждой карты, которая начинает и заканчивает ряд.Мне нужно, чтобы начало и конец выравнивались по границе родительского контейнера.Я не могу найти правильные слова для запроса этого.Самый близкий мне человек, который генерирует статические сетки и добавляет CSS для первого ребенка.Моя сетка теоретически может быть где угодно от 0-99999999 результатов.Мне нужно, чтобы первый (левый отступ) и последний (правый отступ) в каждом ряду не имели соответствующих заполнителей.

Пример кода

<div class="container">
    <div class="row">
        <div class="col-md-4" ng-repeat="tile in tiles">
            <div class="card mb-4 box-shadow">
                <img ng-src=" {{ tile.image }} ">
                <p>{{ tile.title }}</p>
           </div>
        </div>  
    </div> 
</div>

Результат

| [card] [card] [card] |
| [card] [card] [card] |

Желаемый результат

|[card] [card] [card]|
|[card] [card] [card]|

Answer 1

Понять, как создается интервал сетки.Из документов Bootstrap:

"Строки являются обертками для столбцов. Каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между ними. Затем этому отступу противостоят строки с отрицательными полями... "

Поэтому установите для отступа контейнера слева значение 0, а затем отрегулируйте заполнение столбца следующим образом ...

.col-md-4:nth-child(3n) {
    padding-right: 0;
}

@media (max-width:768px) {
    .col-md-4 {
        padding-right: 0;
    }
}

Демонстрация: https://www.codeply.com/go/dvPRr13Wev

<div class="container pl-0">
    <div class="row">
        <div class="col-md-4" ng-repeat="tile in tiles">
            <div class="card mb-4 box-shadow">
                <img src="//placehold.it/500x200">
            </div>
        </div>
        ...
    </div>
</div>

Answer 2

Добавление поля: 0 -15px 0 -15px;чтобы контейнер был решением.Вот как популярный магазин одежды Zalando решает эту проблему.

Answer 3

Если всегда будет три карты подряд, вы можете легко выбрать первую и третью карту с помощью CSS.Однако, если у вас есть контейнер, в котором вы можете иметь много карт в одном контейнере без разделителя между строками, вам придется немного усложнить свой CSS.

// This selector targets every third card starting with the first card.
.card:nth-child(3n-2) {
  margin-left: 0;
}

// This selector targets every third card starting with the third card.
.card:nth-child(3n) {
  margin-right: 0;
}

Вот хорошийресурс, более подробно объясняющий псевдоселектор :nth-child() .