0

Twitter Bootstrap を使用して Web サイトに取り組んでいます。

私は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 に答える