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