BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

问题

I have a bootstrap-4 page grid cards. On mobile devices (col), I would like them to display 2 up, but I get twice the padding between the cards than I do on the outside. This is the result of the left and right card padding meeting in between the two cards.

Because the number of cards can vary from 1 to 99 I am not sure how to reduce the inner padding to even things out. See image: Green is left and right padding. Gray is the card area.

回答1:

try this css to your card element that has padding, it will remove the padding left only for the right side card and will gives you back same padding from all sides

replace this text with your card class that has padding "your-card-padded-class"

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

回答2:

Padding is repeating two times because all col-* are having

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

You can overwrite is by adding padding: 0.

EXAMPLE

<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>

来源：https://stackoverflow.com/questions/61464354/bs4-reduce-padding-between-2-up-grid-cards-on-mobile