CSS



2012年 11月 27

個人的なメモ

Bootstrap(に限らず)メインコンテンツが少なくて、heightが小さい場合はフッターの下に余白が出来てしまいカッコ悪い。
で、何かいいのあるか検索したところ自分でCSSを設定しなくてはいけない模様。

css – Flushing footer to bottom of the page, twitter bootstrap – Stack Overflow


Filed under: CSS

Trackback Uri






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


    Filed under: CSS,jQuery

    Trackback Uri






    2011年 1月 13

    テーブルでセルの隙間を0にする。

    table {
    	border-collapse: collapse;
    }

    デフォルトで設定しておくと楽。

    例外で隙間を作りたい時。

    table {
    	border-collapse: separate;
    	border-spacing: 1px;
    }

    Filed under: CSS

    Trackback Uri






    2010年 1月 14

    つい先日、CSSをイジッていて気が付いた事。

    通常、div等のボックス内にある半角英数の文字列…例えばURL等の長い文字列は改行されない。
    んだけど、IE独自の仕様で word-break ってのがあるらしくIE独自じゃ意味ないしなぁと気にもしなかった。

    たまたまCSSのテストをしていて、試しに word-break:break-all; を設定してみた。
    ふとSafariで確認したら折り返されている!
    いつのまにか実装されていたのか??

    ちなみにMac OSX 用 Safari 4.04 での事。
    FireFox 3.5.7で確認したけど、こちらは改行されていなかった。


    Filed under: CSS,Mac

    Trackback Uri