Căn chỉnh bên trái và căn phải trong div trong Bootstrap

Question

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

ví dụ:

Total cost     $42 

Trên tổng chi phí nên để văn bản liên kết và $ 42 như vậy là hợp liên kết văn bản

Answer 1

2018 Cập nhật ...

Bootstrap 4.0.0

• pull-right hiện là float-right
• text-right cũng giống như 3.x, và làm việc cho các yếu tố inline
• cả float-* và text-* là responsive cho sự liên kết khác nhau ở độ rộng khác nhau (ví dụ: float-sm-right)

Các utils flexbox (ví dụ: justify-content-between) cũng có thể được sử dụng cho sự liên kết:

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

hoặc, tự động lợi nhuận (ví dụ: ml-auto) trong bất kỳ container flexbox (hàng, navbar, thẻ, d-flex, vv ...)

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

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples (float, flexbox, văn bản bên phải, vv ...)

---

Bootstrap 3

Sử dụng lớp 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 Demo

Bạn cũng có thể sử dụng lớp text-right 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

Answer 2

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

Answer 3

<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 đó sẽ làm công việc chỉ ok

Answer 4

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

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

Trong alpha mới nhất, text-xs-right đã được đơn giản hóa thành text-right.

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

Answer 5

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/

Answer 6

Chúng ta có thể đạt được bằng cách 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