Что случилось.тяни-влево и.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"

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

53
bootstrap-4

10 ответов

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

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

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

1

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

в настоящее время классы float-right float-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-right float-left float-xx-left и float-xx

11

Thay удаляются.

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

проверьте документацию bootstrap здесь:

добавил .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-* классы.

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

простой из 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

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

{
    margin-left: auto;
}
-1