Twitter-bootstrap: Làm thế nào để sử dụng class-fluid class đúng cách?

Question

Tôi gặp sự cố khi hiểu cách hoạt động của lớp học row-fluid. Theo số documentation nó tự điều chỉnh để thiết kế chất lỏng như thiết kế đáp ứng. Vì vậy, nếu nó có đủ không gian nó làm cho nó phù hợp trên cùng một hàng nếu không nó sẽ đi đến dòng tiếp theo.

Tuy nhiên nhìn vào ví dụ này ở đây: https://duelify.com/

Lạ lùng hơn ba tiêu đề bài viết đầu tiên phù hợp trên hàng đầu tiên. Hàng thứ hai và phần còn lại được đẩy nhẹ sang phải. Nhưng nhìn vào html (dưới đây) không có lớp học bổ sung có liên quan đến gây ra 'tác dụng phụ' này.

Tại sao tiêu đề bài viết không phù hợp trong một hàng. Tại sao có khoảng cách ngẫu nhiên này ở giữa? Có cách nào để làm cho chúng xuất hiện theo trật tự mà không có khoảng trống ở giữa không?

Answer 1

Trong trường hợp của bạn, mã đúng sẽ như thế nào

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

etc... 

Trong mỗi tổng tối đa row-fluid lớp span lớp phải lên đến 12. lớp Span đã lề trái. Chỉ đứa trẻ cuối cùng trong một số row-fluid không có lề trái.

Xem lại ngay tại các ví dụ trên Twitter Bootstrap documentation. "Đối với bố cục hai cột đơn giản, hãy tạo một .row và thêm số cột .span thích hợp. Vì đây là lưới 12 cột, mỗi cột .span mở rộng một số 12 cột và phải luôn thêm tối đa 12 cột cho mỗi hàng (hay số lượng cột trong công ty mẹ) "

Answer 2

Có một vài điều đang diễn ra tại đây. Hãy nhớ, theo mặc định, tổng kích thước của các nhịp trong một dòng chất lỏng nên thêm đến 12. Có khá nhiều hơn ở đây, vì vậy khi css xác định chiều rộng của một span4 khoảng 33% chúng thực sự vượt quá 100% , do đó, họ sẽ đến một dòng mới. Nhưng họ không phải là thanh toán bù trừ, vì vậy bạn kết thúc với họ looping xung quanh và làm cho cột như trên trang.

Lý do bạn có không gian ở bên trái của hàng sẽ là hàng thứ hai là bootstrap định nghĩa 'máng xối' để cung cấp cho các cột một số lề. Vì các cột thừa được sử dụng, bạn sẽ thấy chúng. Có css cụ thể để giảm máng xối trên khoảng đầu tiên của một hàng thành 0, do đó tại sao không có không gian trên cái đầu tiên.

Các hàng 'tiếp theo' chỉ có hai cột vì sự hiện diện của rãnh bổ sung ném ra khỏi toán và làm cho ba span4s thêm đến hơn 100% chiều rộng, khiến chúng bị quấn.

Answer 3

Đoạn mã dưới đây sẽ làm việc sau khi container (cho bố trí Responsive):.

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
</div>