загрузочные карты v4 исправлены с - PullRequest
Новая
       17

загрузочные карты v4 исправлены с

0 голосов
/ 14 мая 2019

Я хотел бы установить сетку с набором из 3 карт w-50 в каждом ряду на настольных устройствах и по одной карте в ряду на небольших устройствах.

Но, если пользователь отзывчиво делает браузерчтобы окно было меньше, я бы хотел, чтобы карточки оставались на рабочем столе одинаковой ширины, и чтобы пространство между ними уменьшалось, а не сами карточки становились уже.

Кроме того, возможно ли, чтобы карточки былиw-50 на настольном компьютере, но w-75 на небольших устройствах.

Пример кода: 

<div class="row">
  <div class="col-sm-12 col-lg-4 " >

    <div class="card w-50 ">

      <div class="card-header">
    Featured
  </div>
      <div class="card-body ">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>

    </div>
  </div>
  <div class="col-sm-12 col-lg-4">
    <div class="card w-50">
      <div class="card-header">
    Featured
  </div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
   <div class="col-sm-12 col-lg-4 ">
    <div class="card w-50">
      <div class="card-header">
    Featured
  </div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 15 мая 2019

Простой ответ: Нет

Если вы хотите, чтобы карты оставались неизменными, когда пользователь изменяет размер окна, я не думаю, что это возможно с .w-*, потому что это относительная процентная ширина всей строки, равная 100%. Карты уменьшаются по мере того, как пользователь изменяет размеры окон, , если вы не разрешите переполнение в строке .

По той же причине, по которой я не знаю, почему / как у вас возникла мысль, что на настольных устройствах может быть 3 w-50 карт подряд. Максимальное количество w-50 карт, которое вы можете иметь подряд, составляет всего 2: 100% / 50% = 2.

Чтобы карты оставались одинаковой ширины как можно дольше, вам, возможно, придется использовать абсолютных единиц, таких как px или rem. 

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Одна карта в ряду на небольших устройствах

Здесь есть примечание, что вам нужно сделать это, так как по умолчанию <div> имеет ширину 100%. Вы можете просто добавить поля для каждой карты, чтобы они выглядели красиво: 

.cards .card {
    margin-bottom: 1rem;
}

enter image description here

3 карты в ряду на больших устройствах

Я беру большие устройства размером 576 пикселей и больше. Там вы можете установить точки останова для мультимедиа и отобразить .cards как flexbox. И установите фиксированное значение для карточек внутри. 

@media (min-width: 576px) {
    .cards {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }

    .cards .card {
        width: 13rem;
    }
}

enter image description here

https://jsfiddle.net/davidliang2008/woxsv4nm/24/

Как правильно подобрать ширину?

Задать правильную ширину карточек довольно сложно. Мои 2 цента: вы можете установить правильную ширину карточек для разных точек останова, чтобы между карточками не было слишком много места.

Что если вы разрешите переполнение?

Чтобы ширина карточек составляла 50% и их было 3 в ряд, строка должна быть переполнена. По умолчанию дочерние элементы flexbox сжимаются, если не хватает места. Чтобы обеспечить 50% ширину, вы должны отключить это, установив flex-shrink: 0;: 

@media (min-width: 576px) {
    .cards {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }

    .cards .card {
        width: 50%;
        flex-shrink: 0;
    }
}

https://jsfiddle.net/davidliang2008/woxsv4nm/26/

enter image description here

Но в этом случае у вас не будет разрыва между карточками.

...