Ответы пользователя по тегу HTML
  • Как правильно сделать адаптивность?

    @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%;
    }

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