Блог

Главная - Вопросы по программированию - Сетка начальной загрузки: как изменить место столбца?

Сетка начальной загрузки: как изменить место столбца?

#css #twitter-bootstrap #bootstrap-4 #grid-layout

#css #twitter-bootstrap #bootstrap-4 #сетка-макет

Вопрос:

У меня есть вопрос относительно системы bootstrap grid, которую я пытаюсь достичь, и пока не увенчался успехом.

Я пытаюсь создать следующую сеточную систему:

введите описание изображения здесь

Я попробовал код, который вы найдете в этом JSFiddle .

     <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12 border bg-light">
          <h3>Bloc 2</h3>
        </div>
        <div class="col-lg-6 col-md-12 bg-danger">
          <h3>Bloc 3</h3>
        </div>
      </div>
    </div>

Это хорошо работает для систем xs и md. Тем не менее, у меня есть проблемы с версией lg, где я не нахожу способ сложить блок номер 2 (серый) поверх блока номер 3 (красный). Есть ли способ изменить место такого столбца? Как указано на рисунке выше, блок номер 1 должен попадать в нижнюю часть страницы.

Большое спасибо за вашу помощь!

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

1. Я не вижу, где вы реализовали упорядочение столбцов .

2. Спасибо @isherwood за ваш ответ. Да, пока нет; потому что я не вижу, как упорядочение может мне помочь. Основная проблема заключается в том, что на lg синий столбец должен опускаться до нижней части страницы; в то время как на md он должен останавливаться на том же уровне, что и серый столбец. И мне не удается найти способ добиться этого с помощью Bootstrap; если у вас есть какие-либо идеи? Большое спасибо!

3. Сначала я не заметил, что у вас есть вложенная строка. Это нарушило бы упорядочение с использованием классов начальной загрузки. Есть ли причина, по которой вам нужны вложенные строки?

4. На самом деле нет причин. Извините за эту ошибку. Я обновил код здесь, а также в JSFiddle. Есть три столбца. Основная проблема остается с системой lg , где я не могу смещать шесть столбцов, например, потому что я хочу, чтобы синий блок (№ 1) попадал в нижнюю часть страницы (причина в том, что этот блок имеет липкий верх) на устройствах lg .

5. Я бы посоветовал вам также переключиться на способ мышления, ориентированный на мобильные устройства. Ваши классы перечислены в порядке, обратном тому, в котором это делали бы Bootstrap и большинство разработчиков, и ваши изображения также меняются местами. В Bootstrap CSS большие точки останова переопределяют меньшие, поэтому они появляются позже.

Ответ №1:

По сути, вам нужно обернуть div для второго столбца вокруг серого и красного разделов

 <div class="container ">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
          <div class=" border bg-light">
            <h3>Bloc 2</h3>
          </div>
          <div class=" bg-danger">
            <h3>Bloc 3</h3>
          </div>
        </div><!--new div end-->
      </div>
    </div>

Вам нужно будет разработать настройки для интервалов, но это только начало

введите описание изображения здесь