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