Twitter Bootstrap列在某些屏幕尺寸上顯示不正確

Question

我正在使用Twitter Bootstrap在網站上工作。

我有4列的列：

%ul.thumbnails 
    %li.span3 
    .thumbnail 
    %a{href:"#"} 
     %img{src:"http://placehold.it/260x180", alt:""} 
    .thumb_info 
     %h5= truncate("Dot. The world smallest stop motion", length:25) 
     %p 
     %i.icon-eye-open 
     11 
     %i.icon-heart 
     1 

%li.span3 
    .thumbnail 
    %a{href:"#"} 
     %img{src:"http://placehold.it/260x180", alt:""} 
    .thumb_info 
     %h5= truncate("Dot. The world smallest stop motion", length:25) 
     %p 
     %i.icon-eye-open 
     11 
     %i.icon-heart 
     1 
%li.span3 
    .thumbnail 
    %a{href:"#"} 
     %img{src:"http://placehold.it/260x180", alt:""} 
    .thumb_info 
     %h5= truncate("Dot. The world smallest stop motion", length:25) 
     %p 
     %i.icon-eye-open 
     11 
     %i.icon-heart 
     1 
%li.span3 
    .thumbnail 
    %a{href:"#"} 
     %img{src:"http://placehold.it/260x180", alt:""} 
    .thumb_info 
     %h5= truncate("Dot. The world smallest stop motion", length:25) 
     %p 
     %i.icon-eye-open 
     11 
     %i.icon-heart 
     1 

我使用的是響應式設計，因此列適應。但是，在某些顯示屏上，我收到了不好的結果。

這是理想的結果我得到了我的正常卵石大小：

這是我所得到的，當我縮小我的瀏覽器窗口

但是，如果我縮小了，結果看起來像第一個...

我的猜測是圖片格式（260x180）不適用於4列。我只是不知道什麼尺寸會很好...

Answer 1

您需要在.row類中包裝使用自舉網格.span {n}類的元素。 .row類具有負邊距，可以吸收.span {n}類的左邊距。

您的代碼可能是這樣的：

.row 
    %ul.thumbnails 
    %li.span3 
     ... your content here ... 
    %li.span3 
     ... your content here ... 
    %li.span3 
     ... your content here ... 
    %li.span3 
     ... your content here ... 

有一個在這裏的文檔的例子：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

或者，看看Twitter的提供的示例佈局在這裏：http://twitter.github.com/bootstrap/examples.html