0

我正在使用 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 列。就是不知道什么尺码好...

4

1 回答 1

1

您需要将使用引导网格 .span{n} 类的元素包装在 .row 类中。.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

于 2012-07-16T23:44:16.260 回答