Điều gì đã xảy ra với các lớp .pull-left và .pull-right trong Bootstrap 4?

Trong phiên bản mới nhất, pull-left và pull-right đã được thay thế bằng .pull- {xs, sm, md, lg, xl} - {left, right, none}

Điều đó có nghĩa là thay vì viết đơn giản class="pull-right", bây giờ tôi sẽ phải viếtclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Có cách nào ít tẻ nhạt hơn để làm điều đó không?

Trở lại năm 2016 khi câu hỏi này ban đầu được hỏi, câu trả lời là:

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

Nhưng bây giờ câu trả lời được chấp nhận phải là của Robert Went.

Các lớp học float-right float-sm-rightv.v.

Các truy vấn phương tiện ưu tiên thiết bị di động, vì vậy việc sử dụng float-sm-rightsẽ ảnh hưởng đến kích thước màn hình nhỏ và bất kỳ thứ gì rộng hơn, vì vậy không có lý do gì để thêm một lớp cho mỗi chiều rộng. Chỉ cần sử dụng màn hình nhỏ nhất mà bạn muốn ảnh hưởng hoặc float-rightcho tất cả các chiều rộng màn hình.

Tài liệu chính thức:

Lớp học: https://getbootstrap.com/docs/4.4/utilities/float/

Đang cập nhật: https://getbootstrap.com/docs/4.4/migration/#utilities

Nếu bạn đang cập nhật một dự án hiện có dựa trên phiên bản cũ hơn của Bootstrap, bạn có thể sử dụng mở rộng sass để áp dụng các quy tắc cho tên lớp cũ:

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

Cập nhật 2018 (kể từ Bootstrap 4.1)

Có, pull-leftvà pull-rightđã được thay thế bằng float-leftvàfloat-right trong Bootstrap 4.

Tuy nhiên, float sẽ không hoạt động trong mọi trường hợp vì Bootstrap 4 hiện là flexbox .

Để trẻ em flexbox class bên phải, sử dụng tính năng tự động biên độ (ví dụ: ml-auto) hoặc utils flexbox (ví dụ: justify-content-end,align-self-end , vv ..).

Ví dụ

Điều hướng:

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

Breadcrumbs:

<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

Lưới:

<div class="row">
    <div class="col-3">Left</div>
    <div class="col-3 ml-auto">Right</div>
</div>

Đã thay đổi thành float-right float-left float-xx-leftvàfloat-xx-right

Nếu bạn muốn sử dụng những cái có cột trong một công việc khác với col-*các lớp, bạn có thể sử dụng order-*các lớp.

Bạn có thể kiểm soát thứ tự các cột của mình bằng các lớp thứ tự. xem thêm trong tài liệu Bootstrap 4

Một đơn giản từ tài liệu bootstrap:

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

Thay đổi.

Sử dụng float-leftthay vì pull-left. Và float-rightthay vì pull-right.

Kiểm tra Tài liệu bootstrap tại đây :

Đã thêm .float- {sm, md, lg, xl} - {left, right, none} các lớp cho float đáp ứng và loại bỏ .pull-left và .pull-right vì chúng thừa thành .float-left và .float- đúng.

Tôi đã có thể làm điều này với các lớp sau trong dự án của mình

d-flex justify-content-end

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

Không có gì khác làm việc cho tôi. Điều này đã làm. Điều này có thể giúp ai đó.

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

Gói mọi thứ trong div clearfix là chìa khóa.

bootstrap-4 thêm lớp float-left hoặc right để nổi

Đối với bất kỳ ai khác và chỉ là một bổ sung cho Robert, Nếu điều hướng của bạn có giá trị hiển thị linh hoạt, bạn có thể thả nổi phần tử mà bạn cần sang bên phải, bằng cách thêm phần tử này vào css của nó

{
    margin-left: auto;
}