Bootstrap 4 Колода карт Фиксированная ширина карты (если количество карточек в ряду меньше указанного) - PullRequest
Новая
       34

Bootstrap 4 Колода карт Фиксированная ширина карты (если количество карточек в ряду меньше указанного)

0 голосов
/ 29 апреля 2020

У меня на сайте есть колода х карт, поэтому я очень доволен их поведением. Они никогда не превышают установленное количество, 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 картам и будет не распространяется на весь сайт.

1 Ответ

1 голос
/ 29 апреля 2020

Вам необходимо определить максимальную ширину на глобальном уровне. Вы можете обратиться к bootstrap документации.

https://getbootstrap.com/docs/4.0/components/card/

или отослать этот предыдущий пост.

Ранее обсуждалось: Bootstrap 4 колоды с количеством столбцов в зависимости от области просмотра 

.card {
    max-width: 13rem;

}
...