Bootstrap 3: pull-right только для col-lg

Question

Bootstrap 3: pull-right только для col-lg

New to bootstrap 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/

спасибо

672 12

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

12 ответов:

Comments

Ничего не найдено.

Zim · Accepted Answer · 2018-02-22 16:10:21

вы можете поместить "элемент 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 Demo

user1445230 · Accepted Answer · 2014-03-11 19:25:10

попробуйте этот меньший фрагмент (он создан из приведенных выше примеров и мультимедийных запросов mixins в сетке.менее.)
@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;
}
}

CoKe · Accepted Answer · 2016-04-15 16:05:00

.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;
    }
}

Quinn · Accepted Answer · 2015-02-28 11:20:15

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

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

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

Greg · Accepted Answer · 2014-03-27 19:40:28

тоже:

/* small screen portrait */

@media (max-width: 321px) {

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

}


/* small screen lanscape */

@media (max-width: 480px) {

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

}

caw · Accepted Answer · 2017-01-19 01:13:26

добавление 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.

luke · Accepted Answer · 2016-08-09 12:58:20

просто используйте адаптивные классы утилиты 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>

Carlos Ucha · Accepted Answer · 2018-05-10 14:39:26

вы можете использовать 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>

aWebDeveloper · Accepted Answer · 2014-06-18 12:21:42

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

AlbertSamuel · Accepted Answer · 2015-12-17 02:50:59

эта проблема решена в 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

Vasile · Accepted Answer · 2016-09-02 11:17:31

теперь включите bootstrap 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>

jchavannes · Accepted Answer · 2018-05-17 18:30:20

для тех, кто заинтересован в выравнивании текста, простым решением является создание нового класса:
.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>