จัดชิดซ้ายและจัดชิดขวาภายใน div ใน Bootstrap

อะไรคือวิธีการทั่วไปในการจัดแนวข้อความและการจัดแนวข้อความอื่น ๆ ภายในคอนเทนเนอร์ div ใน bootstrap?

เช่น

Total cost                   $42

ค่าใช้จ่ายทั้งหมดข้างต้นควรจัดชิดข้อความและ $ 42 เป็นข้อความชิดขวา

อัพเดต 2018 ...

Bootstrap 4.1+

• pull-right ตอนนี้ float-right
• text-right เหมือนกับ 3.x และใช้ได้กับองค์ประกอบแบบอินไลน์
• ทั้งสองfloat-*และtext-*มีการตอบสนองสำหรับการจัดตำแหน่งที่แตกต่างกันที่ความกว้างที่แตกต่างกัน (เช่น: float-sm-right)

flexbox utils (เช่น:) justify-content-betweenสามารถใช้สำหรับการจัดตำแหน่ง:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

หรือขอบอัตโนมัติ (เช่นml-auto:) ในคอนเทนเนอร์ flexbox ใด ๆ (แถว, navbar, การ์ด, d-flex, ฯลฯ ... )

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 จัด
แนวตัวอย่าง Bootstrap 4 จัดชิดขวา (ลอย, เฟล็กบ็อกซ์, ข้อความขวา, ฯลฯ ... )

Bootstrap 3

ใช้pull-rightคลาส

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Bootstrap 3 สาธิต

คุณสามารถใช้text-rightคลาสดังนี้:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 การสาธิต 2

แทนที่จะใช้pull-rightคลาสจะเป็นการดีกว่าถ้าใช้text-rightคลาสในคอลัมน์เนื่องจากpull-rightบางครั้งอาจทำให้เกิดปัญหาขณะปรับขนาดหน้า

ใน Bootstrap 4 คำตอบที่ถูกต้องคือใช้text-xs-rightคลาส

ใช้งานได้เนื่องจากxsแสดงขนาดวิวพอร์ตที่เล็กที่สุดใน BS text-md-rightหากคุณต้องการคุณสามารถใช้การจัดตำแหน่งเฉพาะเมื่อวิวพอร์ตเป็นขนาดกลางหรือขนาดใหญ่โดยใช้

ในอัลฟ่าล่าสุดtext-xs-rightได้รับการปรับปรุงให้ง่ายtext-rightขึ้น

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

Bootstrap v4 แนะนำการรองรับ flexbox

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

เรียนรู้เพิ่มเติมที่https://v4-alpha.getbootstrap.com/utilities/flexbox/

เราสามารถทำได้โดย Bootstrap 4 Flexbox:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

ตัวอย่าง: JSFiddle

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

ที่ควรจะทำงานเพียงแค่ตกลง