Сдвиг соседних ячеек сетки (без полного переупорядочения) - PullRequest
0 голосов
/ 05 июня 2018

Используя bootstrap v4.0, я работаю над макетом сайта, который показывает правую боковую панель, когда экран находится в режиме XL.в боковой панели есть много предметов.я хочу поменять местами 2 коробки где-то посередине.

в Bootstrap 3 вы можете постепенно перемещать ячейки влево или вправо.Bootstrap 4, я вижу, что есть способ переупорядочить весь столбец, и есть способ отправить ячейку, чтобы быть первым или последним.но я не могу понять, как сдвинуть 1 ячейку только на 1 шаг (в основном, перепрыгнуть через соседнюю ячейку).в моей ситуации, посмотрите, как 2 и 3 (должны) изменить порядок при изменении размера с L на XL

000000000       000000 1111
1111 2222  ==>  000000 3333
333333333       000000 2222
444444444       000000 4444
555555555       000000 5555

Я нашел решение для моей данной ситуации, применив order-xl-N классы для всех боксов боковой панели (кажется, что их применение только к некоторым блокам не работает).ощущается как промах .. поэтому мне любопытно, может быть, я что-то упустил?если на боковой панели есть 20 элементов, нужно ли им всем иметь классы порядка N, чтобы только 2 из них поменялись местами в середине стека?

вот моя личная разметка html ситуации.

<div class="row">
    <div class="col-12 col-xl-8">box 0</div> 
    <div class="col-12 col-xl-4">
        <div class="row">
            <div class="col-12 col-lg-7 col-xl-12">box 1</div>
            <div class="col-12 col-lg-5 col-xl-12">box 2</div>
            <div class="col-12 d-block">box 3</div>
            <div class="col-12">box 4</div>
            <div class="col-12">box 5</div>
        </div>
    </div>
</div>

, хотя я действительно ищу элегантное решение для моей ситуации, обобщенный вариант также был бы полезен .. на некоторых страницах я расставляю приоритеты в рамке 5 и размещаю ее поверх боковой панели XL, чтобы избежать сложного упорядочения.логика, я хочу, чтобы мои классы влияли только на блоки 2 и 3 ... все это для моего загрузчика видео в Facebook проекта .. загрузка социального социального видео ..

1 Ответ

0 голосов
/ 08 июня 2018
  • да, вы должны использовать флексбоксы CSS3 для изменения порядка делений.

  • вы можете сохранить код, заменив col-12 col-lg-7 на col-только LG-7.Попробуй, увидишь.

...