Bootstrap, pull-left для небольших устройств

Я создаю сайт в Bootstrap 3. В любом случае, чтобы элемент использовал класс pull-left на более мелких устройствах и использовал pull-right на более крупных?

Что-то вроде: pull-left-sm pull-right-lg.

Мне удалось сделать это с помощью jquery, уловив размер окна. Есть ли другой путь? Pref без дублирования кода в скрытом-x pull-left. Или считается, что сейчас лучше дублировать код/​​контент, когда вы будете реагировать?

Ответы

Ответ 1

Вы можете использовать CSS Media Queries

Основное использование будет таким: если вы хотите плавать влево ниже устройств шириной 500 пикселей, то

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}

Ответ 2

Просто добавьте это в свой файл SASS:

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

@media (min-width: $screen-lg-min) {
    .pull-lg-left {
        float: left;
    }
    .pull-lg-right {
        float: right;
    }
}

Вставьте фактические значения px для $screen-*, если вы используете простой CSS.

HTML:

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>

Ответ 3

Нет необходимости создавать свой собственный класс с медиа-запросами. Bootstrap 3 уже имеет упорядочение с плавающей запятой для точек прерывания медиа в разделе " Порядок столбцов".

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

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

Ответ 4

Возможно, вы можете использовать порядок столбцов.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Похоже, что плавающие столбцы будут добавлены в версию 4, как это сделал @Alex - https://github.com/twbs/bootstrap/issues/13690

Ответ 5

Да. Создайте свой собственный стиль. Я не знаю, какой элемент вы пытаетесь плавать влево/вправо, но создайте файл application.css и создайте для него класс CSS:

/* default, mobile-first styles */
.logo {
    float: left;
}

/* tablets and upwards */
@media (min-width: 768px) {
    .logo {
        float: right;
    }
}

Не бойтесь писать собственный CSS. Бутстрап предназначен именно для этого: бутстрап, стартовая точка.

Ответ 6

Это то, что я использую. изменить @screen-xs-max для других размеров

/* Pull left in mobile resolutions */
@media (max-width: @screen-xs-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;
    }
}

Ответ 7

Меньшая версия ответа @Alex

@media (max-width: @screen-xs-max) {
    .pull-xs-left {
        .pull-left();
    }

    .pull-xs-right {
        .pull-right();
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .pull-sm-left {
        .pull-left();
    }

    .pull-sm-right {
        .pull-right();
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .pull-md-left {
        .pull-left();
    }

    .pull-md-right {
        .pull-right();
    }
}

@media (min-width: @screen-lg-min) {
    .pull-lg-left {
        .pull-left();
    }

    .pull-lg-right {
        .pull-right();
    }
}