В последней версии 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"
Есть ли менее утомительный способ сделать это?
bootstrap-4
Кевин Дж.
источник
источник
.pull-xs-right
приведет к тому, что объект будет плавать прямо на всех размерах экрана, так как css каскадируется вверх и на более крупные устройства. Ps Может быть, это изменилось в более поздних версиях, но лучше использовать.float-right
вместо.pull-right
.Ответы:
Еще в 2016 году, когда этот вопрос был первоначально задан, ответ был:
Но теперь общепринятым ответом должен быть Роберт Вент.
источник
.float-{sm,md,lg,xl}-{left,right,none}
теперь плавает влево / вправо / нет, тогда как.pull-left
и.pull-right
были удалены..pull-right{@extend .pull-xs-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 для применения правил к старым именам классов:
источник
Обновление 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:
Панировочные сухари:
Сетка:
источник
Изменено на
float-right
float-left
float-xx-left
иfloat-xx-right
источник
Если вы хотите использовать те, у которых есть столбцы, в другой работе с
col-*
классами, вы можете использоватьorder-*
классы.Вы можете контролировать порядок своих столбцов с помощью классов порядка. увидеть больше в документации Bootstrap 4
Простая документация из начальной загрузки:
источник
pull-right
иpull-left
не работают с столбцами сетки в4.1
Тай удалены.
Использовать
float-left
вместоpull-left
. Иfloat-right
вместоpull-right
.Ознакомьтесь с документацией по загрузке здесь :
источник
Больше у меня ничего не работало. Этот сделал. Это может кому-то помочь.
Обернуть все в clearfix div - это ключ.
источник
Я смог сделать это с помощью следующих классов в моем проекте
источник
bootstrap-4 добавить класс float-left или right для плавающего
источник
Для кого-то еще и просто дополнения к Роберту: если ваша навигация имеет значение гибкого отображения, вы можете разместить нужный элемент вправо, добавив это в его css
источник
ml-auto
иmr-auto