เกิดอะไรขึ้นกับคลาส. ดึงซ้ายและ. ดึงขวาใน Bootstrap 4

ในเวอร์ชันใหม่ล่าสุดดึงซ้ายและดึงขวาถูกแทนที่ด้วย. ดึง - {xs, sm, md, lg, xl} - {ซ้ายขวาไม่มี}

นั่นหมายความว่าแทนที่จะเขียนง่ายๆclass="pull-right"ตอนนี้ฉันจะต้องเขียนclass="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

มีวิธีที่น่าเบื่อน้อยกว่าที่จะทำหรือไม่?

ย้อนกลับไปในปี 2559 เมื่อคำถามนี้ถูกถามครั้งแรกคำตอบคือ:

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

แต่ตอนนี้คำตอบที่ได้รับการยอมรับควรเป็นของ Robert Went

ชั้นเรียน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 expand เพื่อใช้กฎกับชื่อคลาสเก่า:

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

อัปเดต 2018 (ณ Bootstrap 4.1)

ใช่pull-leftและpull-rightถูกแทนที่ด้วยfloat-leftและfloat-rightใน Bootstrap 4

อย่างไรก็ตามการลอยตัวจะไม่ทำงานในทุกกรณีเนื่องจาก Bootstrap 4 เป็นflexboxแล้ว

ให้กับเด็กจัด flexbox ไปทางขวาใช้อัตโนมัติอัตรากำไรขั้นต้น (เช่น: ml-auto) หรือ utils flexbox (เช่น: justify-content-end, align-self-endฯลฯ .. )

ตัวอย่าง

การนำทาง:

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

กริด:

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

เปลี่ยนเป็นfloat-right float-left float-xx-leftและfloat-xx-right

ถ้าคุณต้องการใช้คอลัมน์เหล่านั้นกับคอลัมน์ในงานอื่นกับcol-*คลาสคุณสามารถใช้order-*คลาสได้

คุณสามารถควบคุมลำดับของคอลัมน์ของคุณด้วยคลาสลำดับ ดูเพิ่มเติมในเอกสาร Bootstrap 4

ง่าย ๆ จากเอกสาร 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 ถูกลบออก

ใช้float-leftแทนpull-left. และแทนfloat-rightpull-right

ตรวจสอบเอกสาร bootstrap ที่นี่ :

เพิ่ม. ลอย - {sm, md, lg, xl} - {left, right, none} คลาสสำหรับลอยแบบตอบสนองและลบ. ดึงซ้ายและ. ดึงขวาเนื่องจากซ้ำซ้อนกับ. ลอยซ้ายและ. ลอย - ขวา.

ไม่มีอะไรอื่นที่ทำงานสำหรับฉัน อันนี้ทำ สิ่งนี้อาจช่วยใครบางคนได้

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

การห่อทุกอย่างในclearfix div คือกุญแจสำคัญ

ฉันสามารถทำได้กับชั้นเรียนต่อไปนี้ในโครงการของฉัน

d-flex justify-content-end

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

bootstrap-4 เพิ่มคลาสลอยซ้ายหรือขวาสำหรับลอย

สำหรับคนอื่น ๆ และเป็นเพียงส่วนเสริมของ Robert หาก nav ของคุณมีค่าการแสดงผลแบบยืดหยุ่นคุณสามารถลอยองค์ประกอบที่คุณต้องการไปทางขวาได้โดยเพิ่มสิ่งนี้ใน css

{
    margin-left: auto;
}