Класс заказа Bootstrap 4
У меня вопрос по переупорядочению bootstrap 4.1. По документации:
Reordering
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g.,
.order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.
Я попытался установить переупорядочение только на малых и средних экранах, используя классы .order, как показано в документации, но он изменит порядок содержимого также на более крупных точках останова, я делаю это неправильно?
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class = "col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>
Ответы 4
Вы пробовали сделать порядок-1, это устанавливает значение по умолчанию для больших экранов
<div class = "col-sm-12 col-lg-4 order-1 order-sm-2">
<!-- some contents here -->
</div>
<div class = "col-sm-12 col-lg-8 order-2 order-sm-1">
<!-- some contents here -->
</div>
Источник: Порядок столбцов в Bootstrap 4
А, понятно. Таким образом, он проигнорировал бы атрибут order-2.
Да, я исправил ваш ответ, это рабочее решение, которое я принял. Спасибо за поддержку!
@ user9741470 Вы не можете / не можете редактировать ответ только для того, чтобы сделать его правильным и дать ему принятый ответ. И еще кое-что, что у вас было в вашем фрагменте order-sm, а не order, так почему же вы отредактировали этот ответ на этот вопрос, а затем приняли ?. Кстати, Have you tried doing order-1, this sets the default for larger screens не прав. потому что order предназначен для сверхмалых экранов и выше.
Ох, я понял. Просто пытаюсь помочь.
Вам нужно переупорядочить в более крупных точках останова, потому что бутстрап - это сначала мобильный подход (это означает, что он использует min-width в медиа-запросах), поэтому при использовании только sm он будет применять свойства из sm и выше (включая md и lg).
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class = "col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>Еще одна вещь, которую нужно знать о order в BS4, заключается в том, что вы можете использовать order-X-first, order-X-last и order-X-0, поэтому вот фрагмент с этими классами. Вы можете увидеть их в этом отвечать
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class = "col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>Чтобы уточнить, он будет отображать порядок как 2, а затем 1 только на небольших экранах, верно? А с маленьких экранов и выше отображает 1, а потом 2?
просто переключите full page во фрагменте, чтобы увидеть результат, но да
Это решение, которое я принял, я не рассматривал первый мобильный подход фреймворка boostrap, поэтому я неправильно понял, как правильно использовать утилиту класса .order.
Я пробовал разные опубликованные решения. Ваш ответ является наиболее правильным после обновления. Проблема, с которой я столкнулся, заключалась в неправильном использовании класса .order. Я попытался исправить это с помощью .order-1 order-lg-2, и это сработало, но я не слишком разбираюсь в переупорядочении столбцов в booststrap, поэтому я предполагаю, как вы сказали в комментарии, что мой путь неправильный.
вам нужно понимать порядок flexbox, на котором основан порядок начальной загрузки
Ваша формулировка меня смутила, но ваши примеры очень четкие, +1.
Я тоже столкнулся с некоторыми проблемами. Вот следующий код, который заставил меня работать:
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class = "col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>
Обновлено: удален класс .order-md из соответствующих столбцов.
здесь вам не нужен order-md, и он не отвечает на вопрос OP, учитывая, что OP хочет начать с sm и изменить на lg
Да я в курсе. Пытался перебрать решение, но забыл очистить. Спасибо.
Это ожидаемое поведение Bootstrap по умолчанию.
Короче говоря, все суффиксы точек останова начальной загрузки (-sm-md ...) работают от этой точки останова вверх.
Таким образом, если вы установите col-sm-6, это означает, что размер вашего столбца будет наполовину меньше размера строки из точки останова sm и md и lg, если вы не перезапишите его (например, col-md-2).
Все возвращается к здесь (с использованием минимальной ширины в медиа-запросах)
Спасибо, я пробовал, но столбцы будут упорядочены неправильно. Я нашел много людей с той же проблемой, но этот вопрос решил мою проблему. stackoverflow.com/questions/48598915/…