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

Ответ 1

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

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

Но теперь принятый ответ должен быть у Роберта Вента.

Ответ 2

Классы: float-right float-sm-right и т.д.

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

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

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

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

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

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

Ответ 3

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

Ответ 4

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

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

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

Чтобы выровнять дочерние элементы flexbox вправо, используйте auto-margins (например, 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="/">Home</a></li>
    <li class="active"><a href="/">Link</a></li>
    <li class="ml-auto"><a href="/">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>

Ответ 5

Тэй удаляются.

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

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

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

Ответ 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>

Ответ 7

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

d-flex justify-content-end

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

Ответ 8

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

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

Завершение всего в clearfix div - это ключ.

Ответ 9

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

Ответ 10

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

{
    margin-left: auto;
}