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

В последней версии 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"

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

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

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

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

Уроки и 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;
}

Обновление 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>

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

Если вы хотите использовать те, у которых есть столбцы, в другой работе с 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>

Тай удалены.

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

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

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

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

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

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

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

d-flex justify-content-end

<div class="col-lg-6 d-flex justify-content-end">

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

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

{
    margin-left: auto;
}