Bootstrap 4 строки макета не реагирует

Question

Я создаю HTML-шаблон для макета новостной статьи, используя Bootstrap 4, в стеке MEAN, но это не должно иметь значения ...

Требования предъявляются к этому общему макету, одной «избранной» статье в своем собственном столбце и 8 другим статьям в двух строках в другом столбце. При просмотре на экранах меньшего размера или на мобильных устройствах другие статьи должны располагаться под первой и под друг друга по мере необходимости:

Desktop:

-----------------------------------------------------------------
                 | Article 1 | Article 2 | Article 3 | Article 4 |
Article 0        |                                               |
                 | Article 5 | Article 6 | Article 7 | Article 8 |
-----------------------------------------------------------------

Мобильный телефон:

-----------------
Article 0
-----------------
Article 1
-----------------
Article 2
-----------------
.
.

Это то, что я использую для создания макета:

  <div>
    <div class="row">
      <div class="col-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-3">
            Article 1
          </div>
          <div class="col-3">
            Article 2
          </div>
          <div class="col-3">
            Article 3
          </div>
          <div class="col-3">
            Article 4
          </div>
          <div class="col-3">
            Article 5
          </div>
          <div class="col-3">
            Article 6
          </div>
          <div class="col-3">
            Article 7
          </div>
          <div class="col-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

Это прекрасно работает на настольном компьютере, но на мобильном устройстве каждый элемент объединен в один ряд. Я бы хотел, чтобы они все попали в один столбец при небольшом размере экрана. Я подозреваю, что внешний <div class="row" является причиной мобильного поведения, но на рабочем столе я не могу заставить Статью 0 оставаться в одном ряду с другими без использования этого. Я знаю, что, вероятно, упускаю что-то фундаментальное в Bootstrap, поэтому должен быть лучший способ сделать это.

Как сделать так, чтобы этот макет, который отлично работает на рабочем столе, правильно отображался на мобильном телефоне? Спасибо.

Answer 1

Если вы укажете только class="col-3", то это будет для всех размеров экрана. Если вы хотите переопределить это для определенного размера, вы должны перезаписать его классом css, например:

коллектив- см -3

Здесь вы можете выбрать между -sm, -md, -lg и -xl, в зависимости от того, на какой размер экрана вы хотите повлиять.

Значит, у вас будет что-то вроде этого:

  <div>
    <div class="row">
      <div class="col-md-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-3">
            Article 1
          </div>
          <div class="col-md-3">
            Article 2
          </div>
          <div class="col-md-3">
            Article 3
          </div>
          <div class="col-md-3">
            Article 4
          </div>
          <div class="col-md-3">
            Article 5
          </div>
          <div class="col-md-3">
            Article 6
          </div>
          <div class="col-md-3">
            Article 7
          </div>
          <div class="col-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

См. Также документация по сетке начальной загрузки для получения дополнительной информации

Answer 2

Когда вы устанавливаете <div class="col-3">, вы говорите загрузчику, чтобы этот div занимал три столбца на каждой точке останова, даже на самых маленьких экранах. Чтобы решить эту проблему, скажите Bootstrap, чтобы этот div занимал всю ширину на маленьких экранах с col-12 и только тремя столбцами на экранах среднего размера и до col-md-3. Например. <div class="col-12 col-md-3">

 <div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div>
          Article 0
        </div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-12 col-md-3">
            Article 1
          </div>
          <div class="col-12 col-md-3">
            Article 2
          </div>
          <div class="col-12 col-md-3">
            Article 3
          </div>
          <div class="col-12 col-md-3">
            Article 4
          </div>
          <div class="col-12 col-md-3">
            Article 5
          </div>
          <div class="col-12 col-md-3">
            Article 6
          </div>
          <div class="col-12 col-md-3">
            Article 7
          </div>
          <div class="col-12 col-md-3">
            Article 8
          </div>
        </div>
      </div>
    </div>
  </div>

Пример загрузки

Answer 3

Попробуйте использовать col-md-* вместо col-*. Подробнее

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-md-4">
    <div>
      Article 0
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-3">
        Article 1
      </div>
      <div class="col-md-3">
        Article 2
      </div>
      <div class="col-md-3">
        Article 3
      </div>
      <div class="col-md-3">
        Article 4
      </div>
      <div class="col-md-3">
        Article 5
      </div>
      <div class="col-md-3">
        Article 6
      </div>
      <div class="col-md-3">
        Article 7
      </div>
      <div class="col-md-3">
        Article 8
      </div>
    </div>
  </div>
</div>

Answer 4

Я предлагаю вам использовать команду col- *

Я сделал пример, выровняв содержимое по центру, как в демонстрации

.flex{
  display: flex;
}

.align-middle{
    margin-top: auto;
    margin-bottom: auto;
}

div.borda{
  border: 1px solid red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4 flex borda">
    <div class="align-middle">
      Article 0   
    </div>
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-3 borda">
        Article 1
      </div>
      <div class="col-3 borda">
        Article 2
      </div>
      <div class="col-3 borda">
        Article 3
      </div>
      <div class="col-3 borda">
        Article 4
      </div>
      <div class="col-3 borda">
        Article 5
      </div>
      <div class="col-3 borda">
        Article 6
      </div>
      <div class="col-3 borda">
        Article 7
      </div>
      <div class="col-3 borda">
        Article 8
      </div>
    </div>
  </div>
</div>