Bootstrap 3: вытягивание вправо только для col-lg

127

Новое в начальной загрузке 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/

Спасибо

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Thibs
источник
3
Похоже, это может быть поддерживаемая функция в Bootstrap 4
eggy
Так что теперь это есть в Bootstrap 4 . Просто используйте order-lg-1, order-lg-2и т. Д. В своих столбцах.
limfinity

Ответы:

156

Вы можете поместить «элемент 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;
    }
}

Наконец, еще один вариант - создать свой собственный .pull-right-lgкласс CSS.

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

ОБНОВИТЬ

Bootstrap 4 включает в себя отзывчивые поплавки , поэтому в этом случае вам просто нужно использовать float-lg-right.
Никакого дополнительного CSS не требуется .

Демо Bootstrap 4

Zim
источник
спасибо за это, но контент должен использовать полные 6 столбцов, иначе он будет переноситься, что нам не нужно.
Thibs
надеялся не получить медиа-запрос, но сойдет. Спасибо
Thibs
28

Попробуйте этот фрагмент LESS (он создан из приведенных выше примеров и миксинов медиа-запросов в 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;
}
}
Марк П
источник
Копай это решение ты!
Pez
3
Это нужно добавить в бутстрап.
Lorem Ipsum Dolor
20 
.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;
    }
}
коксовый
источник
Хорошо, это должно быть частью начальной загрузки по умолчанию!
Оуэн
12

Нет необходимости создавать собственный класс с медиа-запросами. Bootstrap 3 уже имеет порядок с плавающей запятой для контрольных точек мультимедиа в разделе «Порядок столбцов»: http://getbootstrap.com/css/#grid-column-ordering

Синтаксис класса: col-<#grid-size>-(push|pull)-<#cols>где <#grid-size>xs, sm, md или lg и<#cols> насколько далеко вы хотите, чтобы столбец переместился для этого размера сетки. Тянуть или толкать, конечно, влево или вправо.

Я использую его постоянно, поэтому знаю, что он работает хорошо.

Quinn
источник
3

Тоже отлично работает:

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}
Greg
источник
3

Добавление приведенного ниже 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.

каркать
источник
2

Для тех, кто интересуется выравниванием текста, простое решение - создать новый класс:

.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>
jchavannes
источник
2

Использовать Sass очень просто, просто используйте @extend:

.pull-right-xs { 
    @extend .pull-right;
 }
Роджерио Ориоли
источник
1

Это то, что я использую. измените @ 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;
    }
}
aWebDeveloper
источник
1

Просто используйте отзывчивые служебные классы 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>
Люк
источник
1

Вы можете использовать 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>
Карлос Уча
источник
0

теперь включите бутстрап 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>
Василе
источник