Что случилось с классами .pull-left и .pull-right в Bootstrap 4?

105

В последней версии pull-left и pull-right были заменены на .pull- {xs, sm, md, lg, xl} - {left, right, none}

Это означает, что вместо того, чтобы писать простой class="pull-right", мне теперь придется написатьclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Есть ли менее утомительный способ сделать это?

Кевин Дж.
источник
5
Похоже, вы не совсем поняли подход «сначала мобильные». .pull-xs-rightприведет к тому, что объект будет плавать прямо на всех размерах экрана, так как css каскадируется вверх и на более крупные устройства. Ps Может быть, это изменилось в более поздних версиях, но лучше использовать .float-rightвместо .pull-right.
Фил Хили,

Ответы:

15

Еще в 2016 году, когда этот вопрос был первоначально задан, ответ был:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

Но теперь общепринятым ответом должен быть Роберт Вент.

Филипп Сенн
источник
8
.float-{sm,md,lg,xl}-{left,right,none}теперь плавает влево / вправо / нет, тогда как .pull-leftи .pull-rightбыли удалены.
Mirko
1
pull-right вернулся, но если бы это было так, просто используйте css.pull-right{@extend .pull-xs-right;}
Alexis
4
Ответ был дан 9/2016. Теперь правильный ответ - Роберт Вент.
Филлип Сенн
9
Кажется грубым, что вы получили 21 голос против за устаревший ответ?
LeonardChallis
@PhillipSenn подумайте об обновлении своего ответа, чтобы не терять очки за то, что вы играете в команде.
wizulus
213

Уроки и float-right float-sm-rightдр.

Медиа-запросы ориентированы в первую очередь на мобильные устройства, поэтому их использование float-sm-rightповлияет на небольшие размеры экрана и все, что шире, поэтому нет причин добавлять класс для каждой ширины. Просто используйте самый маленький экран, на который хотите повлиять, или float-rightдля всей ширины экрана.

Официальные документы:

Классы: https://getbootstrap.com/docs/4.4/utilities/float/

Обновление: https://getbootstrap.com/docs/4.4/migration/#utilities

Если вы обновляете существующий проект на основе более ранней версии Bootstrap, вы можете использовать sass extend для применения правил к старым именам классов:

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}
Роберт Уент
источник
документация по этому поводу: getbootstrap.com/docs/4.0/migration/#utilities и getbootstrap.com/docs/4.0/utilities/float
lasec0203 01
25

Обновление 2018 (начиная с Bootstrap 4.1)

Да, pull-leftи pull-rightбыли заменены на float-leftи float-rightв Bootstrap 4.

Однако поплавки будут работать не во всех случаях, поскольку Bootstrap 4 теперь является flexbox .

Чтобы выровнять Flexbox дети вправо, использование авто-полями (т.е. ml-auto) или Flexbox утилиты (т.е. justify-content-end, align-self-endи т.д ..).

Примеры

Navs:

<ul class="nav">
   <li><a href class="nav-link">Link</a></li>
   <li><a href class="nav-link">Link</a></li>
   <li class="ml-auto"><a href class="nav-link">Right</a></li>
</ul>

Панировочные сухари:

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/">Home</a></li>
    <li class="active"><a href="https://stackoverflow.com/">Link</a></li>
    <li class="ml-auto"><a href="https://stackoverflow.com/">Right</a></li>
</ul>

https://www.codeply.com/go/6ITgrV7pvL

Сетка:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>
Зим
источник
3
ml-auto - это именно то, что мне нужно в моем навигаторе
ckapilla
16

Изменено на float-right float-left float-xx-leftиfloat-xx-right

МАМАДУ ЯЯ ДИАЛЛО
источник
6

Если вы хотите использовать те, у которых есть столбцы, в другой работе с col-*классами, вы можете использовать order-*классы.

Вы можете контролировать порядок своих столбцов с помощью классов порядка. увидеть больше в документации Bootstrap 4

Простая документация из начальной загрузки:

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>
Бехнам Азими
источник
Это сработало. По какой-то причине pull-rightи pull-leftне работают с столбцами сетки в4.1
Кунал
1
Это правильно. Порядок - это тот способ, которым вы бы воссоздали строки push / pull, поскольку теперь строки используют flexbox.
Gcamara14
5

Тай удалены.

Использовать float-left вместо pull-left. И float-rightвместо pull-right.

Ознакомьтесь с документацией по загрузке здесь :

Добавлены классы .float- {sm, md, lg, xl} - {left, right, none} для отзывчивых поплавков и удалены .pull-left и .pull-right, поскольку они избыточны для .float-left и .float- право.

Усама
источник
5

Больше у меня ничего не работало. Этот сделал. Это может кому-то помочь.

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

Обернуть все в clearfix div - это ключ.

Оджас Кале
источник
У вас есть 2 встроенных элемента, поэтому они должны быть в блочном элементе, чтобы они могли перемещаться по отношению к своим братьям и сестрам.
Роберт Уехал
4

Я смог сделать это с помощью следующих классов в моем проекте

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">
Маллек
источник
0

bootstrap-4 добавить класс float-left или right для плавающего

Арсалан Ахмад Хан
источник
1
Добро пожаловать в Stack Overflow! К сожалению, этот пост не дает качественного ответа на вопрос. Измените свой ответ или попробуйте предоставить более подробную информацию.
sɐunıɔ ןɐ qɐp
-1

Для кого-то еще и просто дополнения к Роберту: если ваша навигация имеет значение гибкого отображения, вы можете разместить нужный элемент вправо, добавив это в его css

{
    margin-left: auto;
}
Mbougarne
источник
Есть также классы для этого ml-autoиmr-auto
Роберт Пошел