Что случилось.потяните-левый и.pull-right классы в Bootstrap 4?

в последней версии тянуть влево и право были заменены .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"

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

10 53
bootstrap-4

10 ответов:

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

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

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

1

для тех, кто еще находит это:

в настоящее время классы float-rightfloat-sm-right etc.

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

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

классы: https://getbootstrap.com/docs/4.0/utilities/float/

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

127

изменено на float-rightfloat-leftfloat-xx-left и float-xx

11

они удалены.

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

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

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

4

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

d-flex justify-content-end

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

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

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

простой из bootstrap docs:

<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>
2

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

да pull-left и pull-right заменены float-left и float-right в Bootstrap 4.

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

чтобы выровнять дочерние элементы flexbox вправо, используйте авто-поля (т. е.:ml-auto) или Flexbox utils (т. е.: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>
2

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

1

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

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

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

0

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

{
    margin-left: auto;
}
-1