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

我正在使用响应式设计，因此列适应。但是，在一些scree显示器上，我得到了一个糟糕的结果。

这是我在正常的碎片尺寸上获得的理想结果：

desired result

这是我缩小浏览器窗口时的结果

bad result

但是，如果我缩小更多，结果看起来像第一个......

我的猜测是图片格式（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

Twitter Bootstrap列在某些屏幕尺寸上无法正常显示

1 个答案: