Що сталося з класами .pull-left та .pull-right у Bootstrap 4?

У найновішій версії потяг ліворуч і тягнуть праворуч замінено на .pull- {xs, sm, md, lg, xl} - {ліворуч, праворуч, немає}

Це означає, що замість того, щоб писати просте 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 діти вправо, використання авто-полями (тобто 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} - {лівий, правий, жоден} класи для чуйних плавців та вилучено .pull-left та .pull-right, оскільки вони зайві до .float-left та .float- правильно.

Я зміг це зробити за допомогою наступних класів у своєму проекті

d-flex justify-content-end

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

Більше нічого не працювало для мене. Цей і зробив. Це може комусь допомогти.

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

Обгортання всього в divfix виразного є ключовим.

bootstrap-4 додати клас float-ліворуч або праворуч для плаваючого

Для будь-кого іншого і лише доповнення до Роберта. Якщо ваш навичок має значення відображення flex, ви можете плавати потрібний елемент праворуч, додаючи це до свого css

{
    margin-left: auto;
}