Блог

Главная - Вопросы по программированию - Как сделать мой баннер отзывчивым с помощью начальной загрузки

Как сделать мой баннер отзывчивым с помощью начальной загрузки

#html #css #bootstrap-4 #responsive-design

Вопрос:

Я пытаюсь сделать баннер, который выглядит так

В мобильном телефоне это должно выглядеть так

Я использую bootstrap в этом проекте. Я могу добиться этого в веб-режиме, но в мобильном он работает не очень хорошо.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div style="background-color:#BBD4FD">
  <div class="container">
    <div class="row block">
      <div class="row-md align-items-center pt-4" style="height: 100px;">
        <h1 class="text-center" style="letter-spacing: .1rem; font-size: 4rem; color:#183C77">Know how DrinkPrime solves the problem</h1>
      </div>
      <div class="row">
        <div class="col-md align-items-center one" style=" height: 400px; width: 100%;">
          <div class="text-center">One of three columns</div>
        </div>
        <div class="col-md one" style="height: 400px; width: 100%;">
          <div class="text-center">One of three columns</div>
        </div>
        <div class="col-md " style="height: 400px; width: 100%;">
          <div class="text-center">One of three columns</div>
        </div>
      </div>
      </br>
    </div>
  </div>
</div>

Как сделать это отзывчивым и похожим на мобильный вид?

Ответ №1:

Вам нужно решить несколько проблем.

  1. Не устанавливайте ширину элементов библиотеки макетов. Это просто нарушение всей идеи библиотеки макетов. Всегда предполагайте, что в библиотеке есть средство достижения вашей цели, и ищите его в документации.
  2. У вас странно вложенные строки. Обязательно закройте один, прежде чем открывать другой.
  3. Там у вас есть странный тег разрыва заключительной строки (на самом деле это не br так-теги самозакрываются). Не используйте разрывы строк для макета. Используйте маржу или другие структурные механизмы.

Исправьте эти вещи, и вы будете в хорошей форме. Обратите внимание, что я добавил border-bottom класс в качестве отправной точки для настройки. Пограничные документы

 .height-100 {
  min-height: 100px;
}

h1.styled {
  letter-spacing: .1rem;
  font-size: 2rem;
  color: #183C77;
} 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div style="background-color:#BBD4FD">
  <div class="container">
    <div class="row">
      <div class="align-items-center pt-4">
        <h1 class="text-center styled">Know how DrinkPrime solves the problem</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-md height-100 border-bottom align-items-center">
        <div class="text-center">One of three columns</div>
      </div>

      <div class="col-md height-100 border-bottom">
        <div class="text-center">One of three columns</div>
      </div>

      <div class="col-md height-100 border-bottom">
        <div class="text-center">One of three columns</div>
      </div>
    </div>
  </div>
</div>

Ответ №2:

Поскольку вы используете сеточную систему из начальной загрузки, удалите встроенный css <style=" height: 400px; width: 100%;"> , поскольку вы изменили ширину, чтобы изменение размера начальной загрузки было чрезмерным.

Мы используем классы начальной загрузки, чтобы библиотека css заботилась о изменении размера для нас. Вам не нужно переопределять.

Взгляните на адаптивный дизайн здесь — https://getbootstrap.com/docs/4.1/layout/grid/

Комментарии:

1. Для этого вы можете использовать границу класса для любого элемента, который вы хотите добавить. Видишь getbootstrap.com/docs/4.0/utilities/borders

Метки: