カテゴリー
CSS jQuery

Bootstrapでfluidレイアウトの時にthumbnailsを使うとズレる問題の解決策

確認バージョン:Twitter Bootstrap 2.0.4

bootstrap.cssで

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

このようになっており、最初の<li>要素だけ margin-left:0 になるため、2段目からのサムネイルにズレが生じる。

サンプルコード

  • html5 - In bootstrap, how make the thumbnails fluid resize well - Stack Overflow
  • thumbnail of row-fluid

    解決策

    今のところCSSに追記するか、jQueryで操作するスクリプトを追記する方法が取られている模様。下記リンクにコードが載っている。

  • Issue #3494: Fluid Thumbnails Broken After First Row · twitter/bootstrap
  • CSSで対応する場合は、

    .row-fluid ul.thumbnails li.span12 + li { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; }

    となっているけど、それに付け加えて、

    .row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px; }

    にしておくといい感じ。

    2.0.5で対応するのか...な?

    追記

    CSSで対応した場合、iOSシミュレータ(バージョン 4.3)で確認したところ、iPhone&iPadで反映されないみたい。jQueryの場合だと反映されるみたいだけど、実機だとどうなんだろ??
    iOSシミュレータが古いだけかなぁ。

    2012/8/22 追記

    祝バージョンアップ!
    Bootstrap 2.1.0になりましたが...相変わらずズレます...
    公式ページでソースを変えてみた(リストの要素を増やしただけ)けどダメポ。
    Bootstrap fluid thumbnail

    コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください