Bootstrap 4 - многострочные карты не реагируют правильно

Question

Я пытаюсь сделать мои карточки строчными с некоторым отрывом, но когда я применяю margin:5px; к своим картам, строка переполняется. Они не выровнены по центру правильно. На правой стороне карт осталось некоторое пространство. Как я могу правильно их выровнять по центру?

Вот мой HTML и CSS: http://codepen.io/reklamarsiv/pen/vgPLLv

Answer 1

Вы должны поставить отступы и поля внутри из col-* тегов. Создайте div внутри с классом карты вместо того, чтобы класть класс карты в том же div.

<div class="col-xs-12 col-md-6 col-lg-3"> 
    <div class="card"> 
     // contents of card... 
    </div> 
</div> 

Обновлено codepen: http://codepen.io/anon/pen/rjRpQd