it-swarm.com.ru

Реорганизовывать divs быстро с помощью Twitter Bootstrap?

Я работаю с Twitter Bootstrap v3 и хочу быстро изменить порядок элементов, используя порядок столбцов и смещение .

Вот как я хотел бы использовать свои элементы. В точках останова -xs или -sm, где div содержит четыре строки: 

enter image description here

В точках останова -md или -lg, где div содержит два элемента в ряд: 

enter image description here

Это текущий код - я знаю, как установить классы в содержащем div, но не в A, B и C: 

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

Я не могу понять, как получить A, B и C в правильном порядке с помощью колонки Bootstrap 3 и смещение . Это действительно возможно? 

Это насколько я использую JSFiddle: http://jsfiddle.net/3vYgR/

19
Richard

Я думаю, что вы хотите посмотреть на классы Push и pull ...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-Push-6 col-md-Push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-Push-6 col-md-Push-6">Content of C</div>
</div>

Демо: http://bootply.com/77853

23
Zim

Любая причина не использовать более традиционные методы на этом, т.е. плавающий B слева, а остальные элементы справа?

Например, если вы добавили это в текущий CSS в вашем jsfiddle:

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

Смотрите http://jsfiddle.net/E6BFk/

Я не уверен, что упорядочение столбцов в Bootstrap могло бы обеспечить эффект суммирования, возможно, только переупорядочение ... Хотя документация по этой функции довольно скудна.

1
rsigg

Ответ, предоставленный @skelly, является отличной отправной точкой, но вызывает некоторые проблемы с вертикальным выравниванием. Представьте, что A - это высокий div, тогда C вертикально выровнен ниже A .:

[A] [B]
[ ]
    [C]

Кроме того, если вы хотите продвинуться дальше, вам также может понадобиться использовать блоки clearfix. Например;

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

Без clearfixmd или lg может закончиться как:

[A] [B]
    [C] [D]

Это особенно важно, если вы хотите, чтобы в последнем «столбце» было более 2 элементов, или если высота элементов начинает выбрасывать другие элементы без выравнивания.

С clearfixmd или lg будет:

[A] [B]
    [C]
    [D]

Пример скрипки: http://jsfiddle.net/L5174o8d/

0
Mark Cooper

Я пробовал Push/Pull, как показано в ответе Skelly, но C заканчивается в новом ряду, когда применяются высоты: http://www.bootply.com/Q3djHYawgb#

Если B может быть показан первым, когда показан в небольшом размере, то я думаю, что имеет смысл создать строку внутри правого столбца, содержащую A и C:

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

Смотрите http://jsfiddle.net/hoodoo99/L2BE9/

0
Dave