Bootstrap Flex Column

Question

Я создал свой веб-сайт и сейчас пытаюсь сделать его адаптивным.Мой вопрос относится к странице на моем веб-сайте, которая состоит из 8 контейнеров с полной высотой просмотра.Эти контейнеры разделены на две равные колонки (выровненные по горизонтали) с помощью Bootstrap 4. Для любых устройств, меньших, чем iPad / планшет, я хотел бы иметь возможность выровнять эти две колонки друг относительно друга по вертикали.Это возможно?Если да, то как мне этого добиться.Ключевым моментом является то, что я хочу, чтобы столбцы были выровнены таким образом только для небольших устройств.

Answer 1

Из того, что я понимаю, вы не получаете складные колонны.

Ваши столбцы, не сворачивающиеся при определенной ширине экрана, могут быть вызваны различными причинами:

1. Bootstrap неправильно связан.В приведенном ниже фрагменте кода я привел пример минимизированной версии Bootstrap 4.1.3.
2. Bootstrap устарел, и вы используете старую версию, которая не соответствует существующему коду.
3. Обычнаяошибка не в том, что ваш col заключен в <div class="row">.
4. Вы не указали состояние свертывания столбца, которое может быть как col- [sm / md / lg / xl] -

При использовании col-md столбцы начальной загрузки должны автоматически складываться на ширину 768px.Это меняется для каждого сворачиваемого состояния.

Если вы хотите узнать больше о сеточной системе Bootstraps, вы можете щелкнуть здесь

В качестве примера приведен фрагмент кода, который вы можетеиспользовать для дальнейшего использования:

.container .row .col-md-4 {
  border: 1px solid red;
}

<!-- BOOTSTRAP CDN LINK -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <!-- Make col-4, col-[sm/md/lg/xl]-4 for different screen widths -->
    <div class="col-md-4"><p>Column 1<p></div>
    <div class="col-md-4"><p>Column 2<p></div>
    <div class="col-md-4"><p>Column 3<p></div>
  </div>
</div>

* ПРИМЕЧАНИЕ: Чтобы увидеть этот фрагмент кода, разверните его на весь экран и / или измените ширину фрагмента кодапока не произойдет коллапс.