Я работаю с Twitter Bootstrap v3 и хочу быстро изменять порядок элементов, используя и offsetting.
Вот как я хотел бы использовать свои элементы. На отметках -xs или -sm, при этом содержащее div сложенное 4 в строку:
В точке -md или -lg точки останова с содержащим div, уложенным в 2 строки:
Это текущий код - я знаю, как устанавливать классы в содержащем 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 порядок столбцов и offsetting. Действительно ли это возможно?
Это до тех пор, пока я не использовал JSFiddle: http://jsfiddle.net/3vYgR/
Я думаю, вы хотите посмотреть классы 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
Любая причина не использовать более традиционные методы для этого, т.е. плавающий B слева, а остальные элементы - вправо?
Как если бы вы добавили это в текущий CSS в свой jsfiddle:
.b {
float: left;
width: 50%;
height: 100px;
}
.a, .c {
float: right;
width: 50%;
height: 50px;
}
См. http://jsfiddle.net/E6BFk/
Я не уверен, что упорядочение столбцов Bootstrap может выполнить эффект стекирования, возможно, только переупорядочение... Хотя документация довольно тонкая в этой функции.
Я попробовал 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>
Ответ, предоставленный @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>
Без clearfix md или lg может закончиться следующим образом:
[A] [B]
[C] [D]
Это особенно важно, если вы хотите добавить более двух элементов в финальный столбец, или высоты элементов начинают выбрасывать другие элементы из выравнивания.
С clearfix md или lg будет:
[A] [B]
[C]
[D]
Пример скрипта: http://jsfiddle.net/L5174o8d/