Bootstrap 4: col align right

Question

Tôi đang cố gắng tạo một hàng với 2 cols. Một col ở bên trái với nội dung của nó được căn trái, và cột thứ hai với nội dung của nó được căn chỉnh ngay (kéo theo bên phải cũ).

Tôi làm cách nào để thực hiện điều này trong alpha-6?

Tôi đã thử một vài điều, nhưng đây là những gì tôi có cho đến nay. Tôi đang thiếu gì?

<div class="row"> 
    <div class="col">left</div> 
    <div class="col ml-auto">content needs to be right aligned</div> 
</div> 

Answer 1

Sử dụng float-right cho các yếu tố khối, hoặc text-right cho các yếu tố nội tuyến:

<div class="row"> 
    <div class="col">left</div> 
    <div class="col text-right">inline content needs to be right aligned</div> 
</div> 
<div class="row"> 
     <div class="col">left</div> 
     <div class="col"> 
      <div class="float-right">element needs to be right aligned</div> 
     </div> 
</div> 

http://www.codeply.com/go/oPTBdCw1JV

Nếu float-right không được làm việc, nhớ rằng Bootstrap 4 tại là flexbox và nhiều các thành phần là display:flex có thể ngăn không cho float-right hoạt động.

Trong một số trường hợp, các lớp tiện ích như align-self-end hoặc ml-auto công việc sang phải sắp xếp các yếu tố đó là bên trong một container flexbox như Bootstrap 4 .row, Card hoặc Nav. ml-auto (margin-left: auto) được sử dụng trong phần tử flexbox để đẩy các phần tử sang phải.

Bootstrap 4 align right examples

Answer 2

Từ các tài liệu, bạn làm điều đó thích:

<div class="row"> 
    <div class="col-md-6">left</div> 
    <div class="col-md-push-6">content needs to be right aligned</div> 
</div> 

Docs