2012年 8月 15

確認バージョン: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

    More from my site

    • [Bootstrap] メインコンテンツが少ない時にフッターの下に余白ができないように最下段に表示するTips[Bootstrap] メインコンテンツが少ない時にフッターの下に余白ができないように最下段に表示するTips 個人的なメモ Bootstrap(に限らず)メインコンテンツが少なくて、heightが小さい場合はフッターの下に余白が出来てしまいカッコ悪い。 で、何かいいのあるか検索したところ自分でCSSを設定しなくてはいけない模様。 css - Flushing footer to bottom of the page, twitter bootstrap - Stack […]
    • Gunma.web #8 でLTに初挑戦!Gunma.web #8 でLTに初挑戦! #2から参加させて頂いている Gunma.web #8 へ行って来ました。 Gunma.web( web勉強会 in 群馬 ) WEBサイト作成に関わる人が集まる勉強・研究・交流の地域コミュニティです。 WEBサイト作成に関わる プログラマー、SE、HTMLコーダー、WEBデザイナー […]
    • いつのまにかSafari(OS X?)がword-breakを実装していた件いつのまにかSafari(OS X?)がword-breakを実装していた件 つい先日、CSSをイジッていて気が付いた事。 通常、div等のボックス内にある半角英数の文字列…例えばURL等の長い文字列は改行されない。 んだけど、IE独自の仕様で word-break ってのがあるらしくIE独自じゃ意味ないしなぁと気にもしなかった。 たまたまCSSのテストをしていて、試しに word-break:break-all; […]
    • Gunma.web#13に行ってきたよGunma.web#13に行ってきたよ Gunma.web #13 : […]
    • SublimeText2の中でperlを実行する設定 – Build Systemを作成するSublimeText2の中でperlを実行する設定 – Build Systemを作成する Build Systemの新規作成 Sublime Text 2のBuild Systemにはデフォルトだとperlの設定が無いので新たに設定ファイルを作成する必要がある。 Tools > Build System > New Build System... を選択 untitled.sublime-build が開かれるので編集する。 { […]
    • SublimeText2で同一ファイルを2画面表示するプラグイン「Simple Clone」が便利すぎるSublimeText2で同一ファイルを2画面表示するプラグイン「Simple Clone」が便利すぎる コード書く時に画面分割して作業する時は多いと思います。SublimeTextでも画面分割を使う事ができますが、別ファイルをそれぞれのウィンドウに表示するのは簡単にできるのだけど、同じファイルを複数のウィンドウに表示する方法が分かりませんでした。 やり方は、Sublime Text2 で 1 つのファイルを分割表示する | DeVlog - 銀の翼で翔べ - […]

    Filed under: CSS,jQuery

    Trackback Uri



    コメントする