Trung tâm căn chỉnh một cột trong twitter bootstrap

Question

Tôi đã bắt đầu học Bootstrap. Câu hỏi của tôi là làm thế nào để căn giữa canh một cột theo chiều ngang, bootstrap chứa 12 cột bố trí, không có số giữa. Để rõ ràng hơn nếu đó là bố cục 11 cột, số giữa sẽ là 6 (5 cột bên trái, 1 cột ở giữa, 5 cột bên phải)

Answer 1

Câu hỏi đặt ra là trả lời một cách chính xác ở đây Center a column using Twitter Bootstrap 3

Đối với hàng lẻ: ví dụ, col-md-7 hoặc col-mô lớn 9 sử dụng số điện thoại này

Thêm cột đậm vào cột bạn muốn căn giữa.

<div class="col-lg-11 col-centered">  

Và thêm video này vào stylesheet của bạn:

.col-centered{ 
float: none; 
margin: 0 auto; 
} 

Đối thậm chí hàng: ví dụ, col-md-6 hoặc col lớn-10 sử dụng này

Đơn giản chỉ cần sử dụng bootstrap 3 của lớp col bù đắp. tức là,

<div class="col-lg-10 col-lg-offset-1"> 

Answer 2

Với bootstrap 3 cách tốt nhất để đạt được những gì bạn muốn. ..với cột bù trừ. Vui lòng xem các ví dụ sau để biết thêm chi tiết:
http://getbootstrap.com/css/#grid-offsetting

Tóm lại và không nhìn thấy divs của bạn dưới đây là ví dụ có thể hữu ích mà không sử dụng bất kỳ lớp tùy chỉnh nào. Chỉ cần lưu ý cách sử dụng "col-6" và cách nửa số đó là 3 ... do đó, "offset-3" được sử dụng. Chia đều sẽ cho phép trung khoảng cách bạn đang đi cho:

<div class="container"> 
<div class="col-sm-6 col-sm-offset-3"> 
your centered, floating column 
</div></div> 

Answer 3

Nếu bạn không thể đặt 1 cột, bạn có thể chỉ cần đặt 2 cột ở giữa ... (Tôi chỉ kết hợp câu trả lời) Đối với Bootstrap 3

<div class="row"> 
    <div class="col-lg-5 ">5 columns left</div> 
    <div class="col-lg-2 col-centered">2 column middle</div> 
    <div class="col-lg-5">5 columns right</div> 
</div> 

Thậm chí, bạn có thể nhắn tin cho cột trung tâm bằng cách thêm này để phong cách:

.col-centered{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

Bên cạnh đó, có một giải pháp khác here

Answer 4

Tôi đã thử các cách tiếp cận được đưa ra ở trên, nhưng các phương thức này thất bại khi tự động chiều cao của nội dung trong một trong các cols tăng lên, về cơ bản đẩy các cols khác xuống.

cho tôi giải pháp bố cục bảng cơ bản đã hoạt động.

// Apply this to the enclosing row 
.row-centered { 
    text-align: center; 
    display: table-row; 
} 
// Apply this to the cols within the row 
.col-centered { 
    display: table-cell; 
    float: none; 
    vertical-align: top; 
}