BS4 Уменьшите заполнение между 2-Up Grid-картами на мобильном телефоне

Question

У меня есть bootstrap -4 страницы сетки. На мобильных устройствах (col) я хотел бы, чтобы они отображали 2, но я получаю в два раза больше между картами, чем на внешней стороне. Это результат встречи левого и правого заполнения между двумя картами.

Поскольку количество карточек может варьироваться от 1 до 99, я не уверен, как уменьшить внутреннее заполнение, чтобы выровнять вещи. Смотрите изображение: зеленый слева и справа. Серый - это область карты.

Answer 1

попробуйте css для элемента вашей карты, у которого есть отступы, он уберет отступы слева только для карты с правой стороны и вернет вам одинаковые отступы со всех сторон

замените этот текст вашей картой класс, у которого есть отступ "ваш-класс-заполненный класс"

your-card-padded-class:nth-child(even) {
    padding-left: 0px !important;
}

Answer 2

Заполнение повторяется два раза, потому что все col-* имеют

padding-left: 15px;
padding-right: 15px;

Вы можете перезаписать, добавив padding: 0.

ПРИМЕР

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row m-0">
  <div class="col-4 p-0">I am first</div>
  <div class="col-4 p-0">I am second</div>
  <div class="col-4 p-0">I am third</div>
</div>