Bootstrap 4 sắp xếp các phần tử ngay bên trong một div div

Question

Câu hỏi của tôi khá đơn giản nhưng tôi không tìm được cách thích hợp (ý tôi là không sử dụng vị trí tuyệt đối của các phần tử phụ bên trong một vị trí tương đối) để đạt được điều này trong Bootstrap 4.

Tôi có hàng có col-8 và col-4. Nội dung của tôi trong col-4 phải được căn phải để nội dung của nó nằm ở biên phải.

<h1 class="col-md-8">Applications portfolio</h1> 

    <div class="btn-group col-md-4" role="group"> 
    <p class="float-right"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
    </div> 

Đây là một codepen:

https://codepen.io/anon/pen/QpzVgJ

Tôi muốn hai nút của tôi sang phải sắp xếp trong col-4.

Làm thế nào trong Bootstrap 4 để căn chỉnh đúng các phần tử bên phải trong một col?

Answer 1

Sử dụng ml-auto để đẩy các nút bên phải ...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group"> 
    <p class="ml-auto"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
</div> 

lựa chọn khác là để loại bỏ các btn-group từ col-md-4, và sau đó float-right sẽ làm việc như kỳ vọng. Lớp pull-right đã được thay thế bởi float-right trong Bootstrap 4.

<section class="row"> 
    <h1 class="col-md-8">Applications portfolio</h1> 

    <div class="col-md-4" role="group"> 
    <p class="float-right"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
    </div> 
</section> 

---

PS - Để ngăn chặn các thanh cuộn ngang nhìn thấy trong Codepen của bạn, hãy chắc chắn .row được đặt bên trong một container-fluid. Ngoài ra, thường làcol-* được sử dụng để chứa nội dung và không được áp dụng cho các thành phần/yếu tố khác. Vì vậy, ví dụ, nếu bạn muốn sử dụng btn-group ..

<div class="container-fluid"> 
    <section class="row"> 
     <div class="col-md-8"> 
      <h1>Applications portfolio</h1> 
     </div> 
     <div class="col-md-4"> 
      <div class="btn-group float-right mt-2" role="group"> 
       <a class="btn btn-secondary btn-md" href="#"> 
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
       <a class="btn btn-md btn-secondary" href="#"> 
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
      </div> 
     </div> 
    </section> 
</div> 

http://www.codeply.com/go/8OYDK5D8Db

---

liên quan: Right align element in div class with bootstrap 4

Answer 2

Lớp btn-group ở chỗ md-4 làm mà DIV một container flex, nên lớp học text-right thường xuyên cho căn chỉnh sẽ không hoạt động. Thay vào đó, thêm justify-content: flex-end; trong một thuộc tính style với nó:

<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;"> 

https://codepen.io/anon/pen/RpEYEM

(lưu ý: Tôi xóa các p tag bên trong DIV đó)

Answer 3

Có một vài vấn đề với các đánh dấu với điều kiện là làm cho bố cục trông kỳ lạ. @ZimSystem được đặt tên là .container-fluid nhưng cũng phải luôn có một div.col bên trong một .row để bạn có được cùng một loại đệm trên các cạnh.

Bạn không cần <p> xung quanh các nút.Để căn chỉnh, chỉ cần thêm .ml-auto vào nút đầu tiên như sau:

<div class="container-fluid"> 
<section class="row mb-2 mt-2"> 
    <h1 class="col-md-8">Applications portfolio</h1> 

    <div class="btn-group col-md-4" role="group"> 
     <a class="btn btn-secondary btn-md ml-auto" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </div> 
</section> 

<section class="row" style="background-color: grey; height: 50px; overflow:hidden;"> 
    <div class="col"> 
    <p>Just a simple reference block to see the 100% width</p> 
    </div> 
</section> 
</div>