Căn trái và căn phải trong div trong Bootstrap

Một số cách phổ biến để căn trái một số văn bản và phải căn chỉnh một số văn bản khác trong một thùng chứa div trong bootstrap là gì?

ví dụ

Total cost                   $42

Tổng chi phí trên phải là văn bản được căn trái và $ 42 là văn bản được căn phải

Cập nhật 2018 ...

Bootstrap 4.1+

• pull-right Hiện tại là float-right
• text-right giống như 3.x và hoạt động cho các phần tử nội tuyến
• cả hai float-*và text-*đều đáp ứng cho việc căn chỉnh khác nhau ở các độ rộng khác nhau (ví dụ float-sm-right:)

Các tiện ích flexbox (ví dụ justify-content-between:) cũng có thể được sử dụng để căn chỉnh:

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

hoặc, lề tự động (ví dụ ml-auto:) trong bất kỳ hộp chứa flexbox nào (hàng, thanh điều hướng, thẻ, d-flex, v.v ...)

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

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Ví dụ (float, flexbox, text-right, v.v ...)

Bootstrap 3

Sử dụng pull-rightlớp ..

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

Bản giới thiệu Bootstrap 3

Bạn cũng có thể sử dụng text-rightlớp như thế này:

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

Bootstrap 3 Demo 2

Thay vì sử dụng pull-right lớp, tốt hơn là sử dụng text-rightlớp trong cột, vì pull-rightđôi khi tạo ra sự cố trong khi thay đổi kích thước trang.

Trong Bootstrap 4, câu trả lời đúng là sử dụng text-xs-rightlớp.

Điều này hoạt động vì xsbiểu thị kích thước khung nhìn nhỏ nhất trong BS. Nếu bạn muốn, bạn chỉ có thể áp dụng căn chỉnh khi chế độ xem ở mức trung bình hoặc lớn hơn bằng cách sử dụng text-md-right.

Trong bản alpha mới nhất, text-xs-rightđã được đơn giản hóa 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 giới thiệu hỗ trợ 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>

Tìm hiểu thêm tại https://v4-alpha.getbootstrap.com/utilities/flexbox/

Chúng tôi có thể đạt được bằng 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%

Ví dụ: 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>

Điều đó nên làm công việc chỉ cần ok