Я сейчас читаю документацию в Twitter Bootstrap 3 и пытался следить за порядком столбцов, как показано на этой странице, но попал в стену. Я не понимаю, почему такой код работает, и как правильно указать настройки. То, что я хочу показать, это одна сетка, которая состоит из длины 5, а другая длина 5 и, наконец, одна сетка длины 2.
Так что мой что-то вроде этого:
[5] [5] [2]
И чего я хочу добиться, так это того, чтобы при просмотре на рабочем столе отображался приведенный выше макет, но при просмотре на мобильном устройстве я хочу сначала отобразить объект второй длины 5, затем первый объект длины 5 и, наконец, объект длины 2 , вертикально. Как это:
[5] (second)
[5] (first)
[2]
Хотя я пытался выполнить шаг, описанный в приведенной выше документации, я получил объект 5 первой длины поверх второго, несмотря на то, что он был на мобильных платформах, которые, как я уже сказал, должны отображать объект 5 второй длины сверху. Другими словами, я получил это:
[5] (first)
[5] (second)
[2]
Так как я могу правильно поставить второй над первым? Или, поскольку я использую объект той же длины, может ли порядок столбцов не работать?
Вот мой код для вашей информации:
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
Также в документации не уточняется, что pull
и что push
означает. Так я что-то упустил?
Спасибо.
источник
Ответы:
Этот ответ состоит из трех частей, см. Ниже официальный релиз (v3 и v4)
Я даже не мог найти классы col-lg-push-x или pull в исходных файлах для RC1, который я скачал, поэтому проверьте файл bootstrap.css. надеюсь, это то, что они будут разбирать в RC2.
В любом случае, классы col-push- * и pull существуют, и это будет соответствовать вашим потребностям. Вот демо
РЕДАКТИРОВАТЬ: НИЖЕ ОТВЕТ ДЛЯ ОФИЦИАЛЬНОГО ВЫПУСКА v3.0
Также смотрите этот пост в блоге на эту тему
col-vp-push-x
= сдвинуть столбец вправо на количество столбцов x , начиная с того места, где столбец обычно отображается ->position: relative
, на виртуальном или виртуальном порте просмотра.col-vp-pull-x
= потяните столбец влево на x количество столбцов, начиная с того места, где столбец обычно отображается ->position: relative
, на виртуальном или виртуальном порте просмотра.vp = xs, sm, md или lg
х = 1 до 12
Я думаю, что беспокоит большинство людей, это то , что вам нужно изменить порядок столбцов в вашей HTML-разметке (в приведенном ниже примере, B предшествует A) , и что он выполняет только подталкивание или извлечение портов просмотра, которые больше или равно тому, что было указано. т.е.
col-sm-push-5
будет выдвигать только 5 столбцов наsm
view-портах или больше. Это связано с тем, что Bootstrap - это платформа для мобильных устройств, поэтому ваш HTML должен отражать мобильную версию вашего сайта. Pushing и Pulling затем делаются на больших экранах.DEMO
View-port> = sm
View-port <sm
РЕДАКТИРОВАТЬ: НИЖЕ ОТВЕТ ДЛЯ V4.0
С v4 приходит flexbox и другие изменения в сеточной системе, а классы push \ pull были удалены в пользу использования упорядочения flexbox.
.order-*
классы для контроля визуального порядка (где * = от 1 до 12).order-md-*
.order-first
(-1) и.order-last
(13) доступныисточник
col-lg-push
как вы сказали. Большое спасибо.Потяните «тянет» div влево от браузера, и нажмите «выталкивает» div влево от браузера.
Подобно:
Таким образом, в основном в 3-колоночном макете любой веб-страницы «Главное тело» отображается в «Центре», а в представлении «Мобильный» - «Главное тело» в верхней части страницы. Это в основном желательно всем с 3 колонками.
Вы можете просмотреть его здесь: http://jsfiddle.net/DrGeneral/BxaNN/1/
Надеюсь, поможет
источник
col-lg-push-4
изменяет столбец Content со столбцов 1-4 на 5-8, «нажимая» на 4 столбца. Точно так жеcol-lg-pull-4
«тянет» колонку боковой панели с 5-8 до 1-4.Заблуждение Распространенное заблуждение в отношении упорядочения столбцов заключается в том, что я должен (или мог бы) выполнять выталкивание и извлечение на мобильных устройствах и что представления рабочего стола должны отображаться в естественном порядке разметки. Это не верно.
Reality Bootstrap - это мобильный первый фреймворк. Это означает, что порядок столбцов в разметке HTML должен соответствовать порядку их отображения на мобильных устройствах. Это означает, что нажатие и вытягивание выполняется на больших рабочих столах. не на мобильных устройствах вид ..
источник
Я просто чувствовал, что добавлю свои $ 0,2 к этим двум хорошим ответам. У меня был случай, когда мне пришлось переместить последний столбец до самого верха в ситуации с 3 столбцами.
[A] [B] [C],
в
[С]
[А]
[B]
Класс Boostrap
.col-xx-push-X
ничего не делает, но толкает столбец вправо,left: XX%;
поэтому все, что вам нужно сделать, чтобы толкнуть столбец вправо, это добавить количество псевдостолбцов, идущих влево.В таком случае:
два столбца (
col-md-5
иcol-md-3
) идут влево, каждый со значением того, который идет вправо;one (
col-md-4
) идет вправо на сумму первых двух, идущих влево (5 + 3 = 8);источник
Если вам нужно организовать данные в столбцы 1/2/4 в зависимости от размера области просмотра, тогда push и pull могут вообще не быть опцией. Независимо от того, как вы заказываете свои вещи в первую очередь, один из размеров может дать вам неправильный заказ.
Решением в этом случае является использование вложенных строк и столбцов без каких-либо классов push или pull.
пример
В XS вы хотите ...
В СМ хочешь ...
В MD и выше вы хотите ...
Решение
Используйте вложенные дочерние элементы с двумя столбцами в окружающем родительском элементе с двумя столбцами:
Вот рабочий фрагмент:
Другая прелесть этого решения заключается в том, что элементы появляются в коде в их естественном порядке (A, B, C, ... H) и не должны быть перетасованы, что хорошо для генерации CMS.
источник