Nhiều nhịp trong một hàng với Twitter Bootstrap

Question

Sử dụng lưới đáp ứng tiêu chuẩn lưới phản ứng 940px của Bootstrap Tôi đang cố gắng lấy nhiều số .span div trong một.row.

Tôi muốn hiển thị tối đa 3 .span trên mỗi dòng nội bộ tăng cùng với trang. Vì vậy, càng nhiều .span được thêm vào, chúng chỉ được thêm vào .row.

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="span4">1</span> 
     <div class="span4">2</span> 
     <div class="span4">3</span> 
     <div class="span4">4</span> <!-- wrap to a new line-->     
     <div class="span4">5</span>  
    </div> 
    </div> 
</div> 

Vấn đề tôi đang gặp phải là span4 bao bọc một dòng mới có lề trái kế thừa. Trong khi tôi có thể sửa lỗi này với con thứ n() trong các trình duyệt hiện đại, nó rõ ràng vẫn ảnh hưởng đến IE.

Bất kỳ ý tưởng nào về cách tôi có thể đạt được điều này?

Answer 1

Tôi quyết định sử dụng bộ chọn thứ n-con để xóa lề trên một số .span's. Vì vậy, giải pháp cuối cùng tôi nhìn thích này:

Một cột của nhịp cho 320px đến 979px

Hai cột của nhịp cho 980px để 1409px

Ba cột của nhịp cho 1409px và lên

@media (min-width: 320px) and (max-width:979px) { 
    /* one column */ 
    .row-fluid .span4 {width:100%} 
    .row-fluid .span4 {margin-left:0;} 
} 

@media (min-width: 980px) and (max-width:1409px) { 
    /* two columns, remove margin off every third span */ 
    .row-fluid .span4 {width:48.717948718%;} 
    .row-fluid .span4:nth-child(2n+3) {margin-left:0;} 
} 

@media (min-width: 1410px) { 
    /* three columns, .span4's natural width. remove margin off every 4th span */ 
    .main .span4:nth-child(3n+4) {margin-left:0;} 
} 

Đối với IE7 và 8 tôi thiết lập chiều rộng của mỗi khoảng là 48.717948718% (vì vậy hai mỗi hàng) trong css - đặc biệt nhắm mục tiêu các phiên bản này bằng cách sử dụng lớp html5 bolierplate .oldie html. Sau đó, tôi đã sử dụng Modernizr và một thử nghiệm tùy chỉnh cho nthchild được tìm thấy tại https://gist.github.com/1333330 và xóa lợi nhuận cho mỗi khoảng thời gian, nếu trình duyệt không hỗ trợ bộ chọn thứ n-con.

if (!Modernizr.nthchildn) { 
    $('.span4:even').addClass('margless'); 
} 

Answer 2

Có lẽ không phải là giải pháp thanh lịch nhất, nhưng tôi chỉ xác định một lớp css mới trong stylesheet tùy chỉnh của tôi như:

.margless{ 
    margin:0 !important; 
} 

Sau đó, tôi áp dụng nó vào bất kỳ yếu tố mà tôi không muốn có lợi nhuận. Tôi chạy vào cùng một điều bằng cách sử dụng bootstrap và không thể tìm thấy một giải pháp thay thế.

Answer 3

Câu hỏi của bạn xác định rằng bạn muốn cột để tự động quấn vào dòng tiếp theo, nhưng trong hệ thống lưới Bootstrap của .span s được thiết kế đặc biệt để làm việc trong một .row, đó là lưới. Bạn hoàn toàn không sử dụng bất kỳ mã nào trong mã của mình ở số .row. Vì vậy, đề xuất của tôi, nếu bạn vẫn đúng với lưới, là để mã của bạn trông giống như thế này:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="span4">1</div> 
     <div class="span4">2</div> 
     <div class="span4">3</div> 
     <div class="span4">4</div> <!-- wrap to a new line-->     
     <div class="span4">5</div> 
     </div> 
    </div> 
    </div> 
</div> 

Đây là một ví dụ của OP và một cho rõ ràng. http://jsfiddle.net/qJ55V/5/

Bạn phải sử dụng .row (không phải .row-fluid) để có được kiểu được kế thừa áp dụng cho từng cột (span). Có, đó là đánh dấu phụ, nhưng không sử dụng .row sẽ không may khiến các cột của bạn lộn xộn.