возможно ли достичь без использования нескольких мультимедийных запросов / элементов для упорядочивания вложенных столбцов / строк в bootstrap?

ProgramBox

возможно ли достичь без использования нескольких мультимедийных запросов / элементов для упорядочивания вложенных столбцов / строк в bootstrap?

Post author:admin
Запись опубликована:11 мая, 2023
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

это моя структура страницы

HTML

 <div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12" style="height:80px">
          1st
        </div>
        <div class="col-md-12" style="height:50px">
          3rd
        </div>
        <div class="col-md-12" style="height:50px">
          5th
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-12" style="height:50px">
          2nd
        </div>
        <div class="col-md-12" style="height:40px">
          4th
        </div>
        <div class="col-md-12" style="height:90px">
          6th
        </div>
      </div>
    </div>
  </div>
</div>

Я создал для этого jsFiddle
https://jsfiddle.net/ytke8mn3 /

Я пометил столбцы 1-м, 2-м, 3-м, 4-м, 5-м, 6-м

Проблема, с которой я сталкиваюсь, заключается в изменении размера моей страницы до определенной ширины в bootstrap ниже 992px.

Я хотел бы, чтобы столбцы для отображения в такой последовательности > 1й,2й,3й,4й,5й,6й, а не 1-й 2-й 3-й 4-й 5-й 6-й

Как этого добиться. Спасибо

1. Возможно, вы захотите заглянуть в flexbox для этого (поскольку Bootstrap использует это): css-tricks.com/snippets/css/a-guide-to-flexbox

2. Мистер Твикс, вы хотите использовать принудительный метод boostrap row column?

3. @Barrosy это очень хорошая концепция, спасибо. это разрешило упорядочение. однако это создало проблему с пробелами между столбцами, как вы можете видеть в этом jsfiddle.net/5kwg78vy

4. @Saravana Я не знаю, что это значит x.x

5. Я могу попробовать использовать ul li. это нормально?

Ответ №1:

Я нашел кое-что, что сработало для меня, оно очень хорошо выровняло элементы для меня. Пока я доволен этим. для этого потребовалась небольшая реструктуризация элемента dom (меньше написанного кода), но это нормально.

 <div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8" style="height:80px">1st</div>
    <div class="col-md-4" style="height:40px">2nd</div>
    <div class="col-md-8" style="height:40px">3rd</div>
    <div class="col-md-4" style="height:80px">4th</div>
    <div class="col-md-8" style="height:80px">5th</div>
    <div class="col-md-4" style="height:30px">6th</div>
  </div>
</div>

https://github.com/desandro/masonry

Я не знаю, как это реализовано, но это работает. ниже приведен jsfiddle

https://jsfiddle.net/p5u976mt/

1. Я по-прежнему рекомендую не использовать какие-либо стили для элементов макета bootstrap, потому что они не предназначены для изменения стиля (например, любой <div> элемент, содержащий классы col-md-* or row ). Анимация в стороне, это похоже на то, чего вы пытаетесь достичь.

2. @Barrosy стиль «height» в этих divs используется только для представления моей проблемы в jsfiddle, без них divs не будут представлены вам всем должным образом. вот почему я использовал их. но в моем реальном коде у меня есть содержимое внутри этих разделов, оно заботится о высоте.

3. Вы бы предпочли создать элемент внутри элемента column (который также находился бы в элементе row в Bootstrap), хотя я понимаю вашу точку зрения.

Ответ №2:

Внешние контейнеры col-md-8 и col-md-4 делают невозможным изменение порядка так, как вы хотите с помощьюhttps://getbootstrap.com/docs/4.0/layout/grid/#order-classes

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

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

2. да, я понимаю, о чем вы говорите. но я хотел бы избежать этого

Ответ №3:

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

 .row {
 background: #f8f9fa;
 }

 .row > div {
  border: solid 1px #6c757d;
  }

1. да, это делает упорядочение столбцов правильным. однако, если столбцы имеют разную высоту, это создаст пустые пространства, которые я хотел бы заполнить. пожалуйста, проверьте эту скрипку jsfiddle.net/6Lz3o2y0