Новое для начальной загрузки 3.... В моем макете я:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
Я хотел бы, чтобы "элементы 2" НЕ были выровнены прямо на экранах меньших, чем col-lg. Так что эффективно иметь класс pull-right только для col-lg-6...
Как я мог достичь этого?
Вот скрипка: http://jsfiddle.net/thibs/Y6WPz/
Спасибо,
Вы можете поместить "элемент 2" в меньший столбец (то есть: col-2
), а затем использовать push
на больших экранах:
<div class="row">
<div class="col-lg-6 col-xs-6">elements 1</div>
<div class="col-lg-6 col-xs-6">
<div class="row">
<div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
<div class="pull-right">elements 2</div>
</div>
</div>
</div>
</div>
Демо: http://bootply.com/88095
Другой вариант - переопределить плавающее число .pull-right
с помощью запроса @media.
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
Наконец, другой вариант - создать собственный CSS-класс .pull-right-lg
.
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
ОБНОВИТЬ
Bootstrap 4 включает в себя адаптивные поплавки, поэтому в этом случае вы просто используете float-lg-right
.
Никаких дополнительных CSS не требуется.
Попробуйте этот фрагмент LESS (он создан из приведенных выше примеров и медиа-запросов mixins в grid.less).
@media (min-width: @screen-sm-min) {
.pull-right-sm {
float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
float: right;
}
}
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
float: right;
}
.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
float: left;
}
@media (max-width: 767px) {
.pull-right-not-xs, .pull-left-not-xs{
float: none;
}
.pull-right-xs {
float: right;
}
.pull-left-xs {
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right-not-sm, .pull-left-not-sm{
float: none;
}
.pull-right-sm {
float: right;
}
.pull-left-sm {
float: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right-not-md, .pull-left-not-md{
float: none;
}
.pull-right-md {
float: right;
}
.pull-left-md {
float: left;
}
}
@media (min-width: 1200px) {
.pull-right-not-lg, .pull-left-not-lg{
float: none;
}
.pull-right-lg {
float: right;
}
.pull-left-lg {
float: left;
}
}
Нет необходимости создавать свой собственный класс со средствами массовой информации. У Bootstrap 3 уже есть упорядочение с плавающей точкой для точек останова Media в разделе Column Ordering: http://getbootstrap.com/css/#grid-column-ordering
Синтаксис для класса col-<#grid-size>-(push|pull)-<#cols>
, где <#grid-size>
- это xs, sm, md или lg и <#cols>
, как далеко вы хотите, чтобы столбец перемещался для этого размера сетки. Нажатие или выталкивание осуществляется влево или вправо, конечно.
Я использую его все время, поэтому я знаю, что он работает хорошо.
Добавление CSS, показанного ниже, в ваше приложение Bootstrap 3 позволяет поддерживать
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right
которые работают точно так же, как новый
float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right
которые были введены в Bootstrap 4:
@media (min-width: 768px) {
.pull-sm-left {
float: left !important;
}
.pull-sm-right {
float: right !important;
}
.pull-sm-none {
float: none !important;
}
}
@media (min-width: 992px) {
.pull-md-left {
float: left !important;
}
.pull-md-right {
float: right !important;
}
.pull-md-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.pull-lg-left {
float: left !important;
}
.pull-lg-right {
float: right !important;
}
.pull-lg-none {
float: none !important;
}
}
.pull-none {
float: none !important;
}
Кроме того, он добавляет
pull-{ε|sm-|md-|lg-}none
для полноты, совместимости с
float-{ε|sm-|md-|lg-|xl-}none
из Bootstrap 4.
Также отлично работает:
/* small screen portrait */
@media (max-width: 321px) {
.pull-right {
float: none!important;
}
}
/* small screen lanscape */
@media (max-width: 480px) {
.pull-right {
float: none!important;
}
}
С помощью Sass это очень просто, просто используйте @extend
:
.pull-right-xs {
@extend .pull-right;
}
Для тех, кто интересуется выравниванием текста, простое решение - создать новый класс:
.text-right-large {
text-align: right;
}
@media (max-width: 991px) {
.text-right-large {
text-align: left;
}
}
Затем добавьте этот класс:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right-large">
elements 2
</div>
</div>
Вы можете использовать push и pull для изменения порядка столбцов. Вы тянете одну колонку, а другую толкаете на больших устройствах:
<div class="row">
<div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
<div class="col-lg-6 col-md-6 col-lg-push-6">
<div>
elements 2
</div>
</div>
</div>
теперь включает загрузку 4:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');
и код должен выглядеть следующим образом:
<div class="row">
<div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
<div class="col-lg-6 col-md-6" style="border:solid 1px red">
<div class="pull-lg-right pull-xl-right">
elements 2
</div>
</div>
</div>
Просто используйте загрузочные классы утилиты bootstrap!
Лучшим решением для этой задачи является использование следующего кода:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right">
<div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
elements 2
</div>
</div>
</div>
Элемент будет выровнен по правому краю только на экранах lg
- в остальном атрибут display
будет установлен в block
, как это по умолчанию для элемента div
.
Этот подход использует класс text-right
для родительского элемента вместо pull-right
.
Альтернативное решение:
Самый большой недостаток заключается в том, что внутренний код html должен повторяться дважды.
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right visible-lg">
elements 2
</div>
<div class="hidden-lg">
elements 2
</div>
</div>
</div>
Эта проблема решается в bootstrap-4-alpha-2.
Вот ссылка: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/
Клонировать его на github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2
Это то, что я использую. change @screen-md-max для других размеров
/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
.pull-xs-right {
float: right !important;
}
.pull-xs-left {
float: left !important;
}
.radio-inline.pull-xs-left + .radio-inline.pull-xs-left ,
.checkbox-inline.pull-xs-left + .checkbox-inline.pull-xs-left {
margin-left: 0;
}
.radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
margin-right: 10px;
}
}