Как правильно сделать адаптивность?

Question

[Александр Андропов]

Доброго времени суток, друзья. Хочу сделать "карточки" на сайте, выглядят так:

<div class="container-fluid mt-2">
    <div class="row">  
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 1</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 2</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 3</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 4</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 5</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 6</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 7</a> - Здесь описание карточки <br> и много разной информации
    	</div>
    	<div class="col border-grid">
            <a href="#" target="_blank" class="link">Ссылка 8</a> - Здесь описание карточки <br> и много разной информации
    	</div>	
    </div>
</div>

В итоге, на разрешении 1920 я получаю вот такой вывод:

А на разрешении 1366 такой:


Подскажите, как мне сделать карточки фиксированной ширины и высоты и чтобы они переносились на новую строку, если "экрана не хватает". На 1920 получается будет помещаться 8 карточек, на 1366 - 5 и так далее.
Спасибо!

Comments

[Антон Литвиненко]

использовать не col а col-lg, col-md и тд с указанием ширины

Answer 1

[marina-wolf]

<div class="col border-grid">
      <a href="#" target="_blank" class="link">Ссылка 1</a> - Здесь описание карточки <br> и много разной информации
</div>

нужно добавить col-md-?, col-xl-? и прочие подписи к вашему классу col в зависимости от ширины экрана. Но стоит учесть момент, что бутстрап берет за основу для col сетку на 12 колонок, и значения цифр вместо "?" нужно подбирать исходя из этого понимания. Если вам нужна другая ширина и количество блоков в строке, то добавьте свой уникальный класс и посчитайте нужное количество % для его ширины, за основу написания параметров своего класса можно взять значения классов col из бустрапа, только прописать нужный % для ширины блока.

Пример тут:

<div class="col col-md-2 col-xl-1 col-md-my-8 border-grid">
            <a href="#" target="_blank" class="link">Ссылка 1</a> - Здесь описание карточки <br> и много разной информации
</div>

.col-md-my-8 {
    -ms-flex: 0 0 12,5%;
    flex: 0 0 12,5%;
    max-width: 12,5%;
}

А также добавить свои медиазапросы на ширину экрана и поведение своих уникальных классов

Answer 2

[Smirator]

Для таких случаев использую:
class="row" и class="col-md". Также, можно регулировать col-md-4/6/8.
Почитать: https://getbootstrap.ru/docs/v4-alpha/layout/grid/

<div class = "row">
    <div class="col-md"
        <p>Какой-то контент</p>
    </div>
     <div class="col-md">
          <p>Какой-то контент2</p>
      </div>
</div>

Answer 3

[Алексей Голягин]

Вариант 1 (скорее всего не подойдет):
<div class="row row-cols-auto">
Вариант 2:

<div class="row row-cols-3 row-cols-md-4 row-cols-xl-6 row-cols-xxl-8">

т.к. класса для 8 колонок нет, придется немного расширить сетку:

@media (min-width: 1400px) {
  .row-cols-xxl-8 > * {
    flex: 0 0 auto;
    width: 12,5%;
  }
}

Написано для bootstrap 5.1