Управление порядком столбцов с использованием col-lg-push и col-lg-pull в Twitter. Загрузочный файл 3

Теперь я читаю документацию на 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. Так что я чего-то не хватает?

Спасибо.

Ответы

Ответ 1

Этот ответ состоит из трех частей, см. ниже официальную версию (v3 и v4)

Я даже не мог найти классы col-lg-push-x или pull в исходных файлах для загруженного RC1, поэтому проверьте файл bootstrap.css. надеюсь, это то, что они будут разбирать в RC2.

в любом случае классы col-push- * и pull существовали, и это будет соответствовать вашим потребностям. Вот демонстрация

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

РЕДАКТИРОВАТЬ: НИЖЕ ОТВЕТ НА ОФИЦИАЛЬНЫЙ РЕЛИЗ v3.0

Также см. Это сообщение в блоге по теме

col-vp-push-x= нажмите столбец справа от столбца x, начиная с того места, где обычно будет отображаться столбец → position: relative, на vp или более крупный порт просмотра.
col-vp-pull-x= потяните столбец слева на x количество столбцов, начиная с того, где обычно будет отображаться столбец → position: relative, на vp или более крупный порт просмотра.

vp= xs, sm, md или lg

x= 1 через 12

Я думаю, что в большинстве случаев люди, , это то, что вам нужно изменить порядок столбцов в вашей разметке HTML (в приведенном ниже примере B до A), и что это только делает нажатие или вытягивание портов просмотра, которые больше или равны тому, что было указано. т.е. col-sm-push-5 будет только толкать 5 столбцов на sm view-ports или больше. Это связано с тем, что Bootstrap - это "мобильная первая" структура, поэтому ваш HTML должен отражать мобильную версию вашего сайта. Затем нажимаются кнопки Pushing and Pulling на больших экранах.

(Рабочий стол) Большие порты просмотра выталкиваются и вытягиваются.
(для мобильных устройств) Небольшие представления портов отображаются в обычном порядке.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

View-port >= sm

|A|B|C|

View-port < см

|B|
|A|
|C|

РЕДАКТИРОВАТЬ: НИЖЕ ОТВЕТ НА V4.0 Alpha\Betastrong >

С v4 приходит flexbox и другие изменения в сетке, а классы push\pull несколько упрощены.

push-vp-x= нажмите столбец справа на x количество столбцов, начиная с того места, где обычно будет отображаться столбец → , установив свойство left: на процент, на vp или более крупном порт просмотра.
pull-vp-x= потяните столбец слева на x количество столбцов, начиная с того места, где обычно будет отображаться столбец → , установив свойство right: в процентах, на vp или более крупном порт просмотра.

vp= xs, sm, md, lg или xl

x= 1 через 12

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Ответ 2

Потяните "тянет" div влево от браузера и нажмите "толкает" div влево от браузера.

Как:

Таким образом, в основном в раскладке из трех столбцов любой веб-страницы "Главное тело" появляется в "Центре" и в "Мобильном" представлении "Главное тело" появляется на "Верх" страницы. Это, в основном, желательно для всех, у кого есть три столбца.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Вы можете посмотреть его здесь: http://jsfiddle.net/DrGeneral/BxaNN/1/

Надеюсь, что это поможет

Ответ 3

Я просто почувствовал, что добавлю свои 0,2 доллара к этим двум хорошим ответам. У меня был случай, когда мне пришлось переместить последний столбец на весь уровень в трех столбцах.

[А] [В] [С]

[С]

[А]

[В]

Класс Boostrap .col-xx-push-X не делает ничего, кроме нажатия столбца вправо с помощью left: XX%; поэтому все, что вам нужно сделать, чтобы нажать столбец справа, - это добавить количество псевдо столбцов, идущих влево.

В этом случае:

два столбца (col-md-5 и col-md-3) идут влево, каждый со значением того, что идет правильно;
one (col-md-4) идет прямо по сумме первых двух, идущих влево (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Ответ 4

Заблуждение Распространенным заблуждением с упорядочением столбцов является то, что я должен (или мог) делать толкание и вытягивание мобильных устройств и что представления рабочего стола должны отображаться в естественном порядке разметки. Это неправильно.

Реальность Bootstrap - первая мобильная платформа. Это означает, что порядок столбцов в вашей разметке HTML должен представлять порядок, в котором вы хотите, чтобы они отображались на мобильных устройствах. Это означает, что нажатие и вытаскивание выполняется на больших представлениях рабочего стола. не отображается на мобильных устройствах.

Брэндон Шмальц - веб-разработчик с полным стеком Посмотрите полное описание здесь

Ответ 5

Если вам нужно организовать данные в столбцах 1/2/4 в зависимости от размера окна просмотра, тогда нажать и вытащить может вообще не вариант. Независимо от того, как вы заказываете свои товары в первую очередь, один из размеров может дать вам неправильный порядок.

Решение в этом случае - использовать вложенные строки и столбцы без каких-либо классов push или pull.

Пример

В XS вы хотите...

A
B
C
D
E
F
G
H

В SM вы хотите...

A   E
B   F
C   G
D   H

В MD и выше вы хотите...

A   C   E   G
B   D   F   H

Решение

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

Вот рабочий фрагмент:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>