Cách căn chỉnh nút để căn giữa bằng cách sử dụng Bootstrap

Question

Tôi đã tạo một ô bằng cách sử dụng Bootstrap. Bên trong gạch, gần phía dưới tôi muốn ba nút (bắt đầu, giữa và cuối) của gạch.

Tôi đã thực hiện các nút bắt đầu và kết thúc nhưng sử dụng hai thẻ div với các lớp pull-left và pull-right. Bây giờ những gì tôi muốn là đặt nút giữa.

Dưới đây là một phần của mã của tôi và một ảnh chụp màn hình:

<div class="col-lg-12"> 
    <div class="pull-left"> 
     <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
    </div> 

    <!-- I want another button here, center to the tile--> 

    <div class="pull-right"> 
     <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button> 
    </div> 
</div> 

Answer 1

Một tính năng mạnh mẽ nhất Bootstrap được làm tổ row yếu tố. Mỗi col-* container có thể có một row bên trong nó, sau đó cung cấp một bộ đầy đủ của 12 col gian:

<div class="col-lg-12"> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Middle Button</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Decline</button> 
     </div> 
    </div> 
</div> 

Tôi không chắc chắn như thế nào pull-* lớp học của bạn một cách chính xác làm việc, nhưng sử dụng Bootstrap tích hợp trong hệ thống lưới bạn nên có thể loại bỏ chúng.

Đừng bỏ lỡ Bootstrap guide on nesting columns, vì nó cung cấp nhiều thông tin hơn so với câu trả lời này.

Answer 2

Bạn đang sử dụng bootstrap tôi đoán, vì vậy đặt cược và thực hành tốt nhất của bạn sẽ là tận dụng lợi thế của hệ thống lưới điện của nó.

Tạo một div với một lớp được gọi là hàng và chia các trẻ em bên trong div cha đó thành nội dung bạn muốn.

Cách phân chia này hoạt động là số đằng sau col- [size] - quyết định lượng không gian nằm ngang sẽ mất bao nhiêu. Cuối cùng nó phải thêm đến 12, vì vậy trong trường hợp của bạn, chúng tôi muốn ba phần có kích thước 4 mỗi.

Ví dụ:

<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 

Sau đó, chỉ cần đặt các nút bên trong col-xs-4 div và bạn đã sẵn sàng để đi.

Answer 3

Sử dụng tùy chọn này:

<div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>