У меня на сайте есть колода х карт, поэтому я очень доволен их поведением. Они никогда не превышают установленное количество, n, на строку для данного разрешения, они остаются на одной высоте и c. Единственная проблема, однако, заключается в том, что если у меня есть строка 2, с 2 ниже, а затем дополнительная 1 в третьем ряду, эта последняя карта будет расширяться, чтобы заполнить ширину 2 карты вместо того, чтобы остаться правильного размера, и остаться налево.
Я использую систему, аналогичную приведенной ниже, чтобы установить, сколько карт разрешено в строке для заданного разрешения:
@media (min-width:992px) and (max-width: 1199px) {
.card-deck span:nth-of-type(4n) {
display: block;
width: 100%;
}
}
@media (min-width:768px) and (max-width: 991px) {
.card-deck span:nth-of-type(3n) {
display: block;
width: 100%;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.card-deck span:nth-of-type(2n) {
display: block;
width: 100%;
}
}
И тогда каждая карта определяется в HTML как:
<div class="card-deck">
<div class="card mb-4" data-clickable="true" data-href="#">
<img class="card-img-top" src="https://via.placeholder.com/700x400" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Test Card</h5>
</div>
<div class="card-footer">
<small class="text-muted">More Info Here</small>
</div>
</div>
<span></span>
Каждая карта разделена тегом span, я не могу вспомнить, почему.
Вот кодовое поле: https://www.codeply.com/p/A2JgtdhP1Y (нажмите на экран планшета, затем измените ширину, наблюдая за нижней картой / с)
Как вы можете видеть при определенных разрешениях, карты в нижнем ряду, если они меньше максимального количества карт, разрешенных в этом ряду, будут пытаться заполнить Разрыв путем расширения ширины пути, я хотел бы остановить это и выровнять их по левому краю с такой же шириной, как другие карты выше.
РЕДАКТИРОВАТЬ: Для всех, кто имеет это вопрос, настройка глобальной максимальной ширины для карт работает. Вы должны попробовать несколько разных значений ширины для всех ваших медиазапросов, чтобы нижний выстроился в линию, я также использовал html id для своей колоды карт, так что css будет применяться только к этим конкретным c картам и будет не распространяется на весь сайт.