Почему загрузочный столбец не занимает 12 столбцов автоматически?

Я пытаюсь сделать так, чтобы три карты вели себя в Bootstrap.

Все три карты располагаются горизонтально в режиме просмотра ноутбука и выше (col-lg-4). Это прекрасно работает.

Первые две карты располагаются горизонтально в представлении iPad, а последняя карта — вертикально под ними (col-md-6 для первых двух и col-md-12 для последней карты). Это тоже отлично работает.

Поскольку я не объявлял поведение для мобильных устройств, я ожидаю, что все три карты будут автоматически складываться вертикально на маленьком экране (мобильном и ниже), но это не так. Первые два занимают по 6 столбцов для мобильных и даже небольших экранов.

Я попытался добавить класс по умолчанию col к первым двум, но они тоже не работают.

    <div class = "col col-lg-4 col-md-6">
      <div class = "card">
        <div class = "card-header">
          <h3>Chihuahua</h3>
        </div>
        <div class = "card-body">
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <button type = "button">Sign Up</button>
        </div>

      </div>

    </div>

    <div class = "col col-lg-4 col-md-6">
      <div class = "card">
        <div class = "card-header">
          <h3>Labrador</h3>
        </div>
        <div class = "card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type = "button">Sign Up</button>

        </div>

      </div>
    </div>

    <div class = "col-lg-4">
      <div class = "card">
        <div class = "card-header">
          <h3>Mastiff</h3>
        </div>
        <div class = "card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type = "button">Sign Up</button>
        </div>

      </div>
    </div>

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

вам нужен col-12 (getbootstrap.com/docs/4.3/layout/grid/#all-breakpoints)

— 27.05.2019 01:34

html css bootstrap-4

27.05.2019 01:19

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

118

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Надеюсь, это то, что вы хотите. Это решение предназначено для Bootstrap 3. Если вы работаете с Bootstrap 4, вам придется выполнить некоторые настройки сетки.

 <div class = "container-fluid">

     <div class = "row">

         <div class = "col-sm-6 col-md-4">
             <div class = "card">
                 <div class = "card-header">
                     <h3>Chihuahua</h3>
                 </div>
                 <div class = "card-body">
                     <h2>Free</h2>
                     <p>5 Matches Per Day</p>
                     <p>10 Messages Per Day</p>
                     <p>Unlimited App Usage</p>
                     <button type = "button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class = "col-sm-6 col-md-4">
             <div class = "card">
                 <div class = "card-header">
                    <h3>Labrador</h3>
                 </div>
                 <div class = "card-body">
                     <h2>$49 / mo</h2>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type = "button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class = "col-md-4 visible-xs visible-md visible-lg">
             <div class = "card">
                 <div class = "card-header">
                     <h3>Mastiff</h3>
                 </div>
                 <div class = "card-body">
                     <h2>$99 / mo</h2>
                     <p>Pirority Listing</p>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type = "button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class = "row visible-sm">
             <div class = "col-sm-12">
                 <div class = "card">
                     <div class = "card-header">
                         <h3>Mastiff</h3>
                     </div>
                     <div class = "card-body">
                         <h2>$99 / mo</h2>
                         <p>Pirority Listing</p>
                         <p>Unlimited Matches</p>
                         <p>Unlimited Messages</p>
                         <p>Unlimited App Usage</p>
                         <button type = "button">Sign Up</button>
                     </div>
                 </div>
             </div> 
         </div>

     </div>

 </div>

27.05.2019 10:49

Другие вопросы по теме

Высота Div в соответствии с содержимым

Пустое место рядом с содержимым, когда я уменьшаю размер экрана

Bootstrap - применить класс в зависимости от размера экрана

Мне нужна помощь в выравнивании текста по центру CSS Grid

CSS: перевести пробел между

Предупреждение: Prop `className` не соответствует ~ Пользовательский интерфейс материала css произвольно ломается при перезагрузке

Сохранять цвет фона после выбора, когда он находится в фокусе Microsoft Edge

Как сделать выпадающее меню вертикальным?

Поместить изображение внутри в качестве фоновой кнопки при нажатии кнопки

Щелчком по значку скрыть первого родителя

Почему загрузочный столбец не занимает 12 столбцов автоматически?

Ответы 1

Другие вопросы по теме

Похожие вопросы