clicktx::Tech::Memo

個人的なメモ

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

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

確認バージョン:Twitter Bootstrap 2.0.4

bootstrap.cssで

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

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

サンプルコード

解決策

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

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になりましたが…相変わらずズレます…
公式ページでソースを変えてみた（リストの要素を増やしただけ）けどダメポ。

#2から参加させて頂いている Gunma.web #8 へ行って来ました。

Gunma.web（ web勉強会 in 群馬 ）

WEBサイト作成に関わる人が集まる勉強・研究・交流の地域コミュニティです。
WEBサイト作成に関わる プログラマー、SE、HTMLコーダー、WEBデザイナー さんなどが集まります。

参加数、発表数共に過去最高となった今回。
なぜ今回を選んでしまったのか…。
ひな祭りということもあり（？）、女子参加率が激増！
ボク以外はみんな鼻の下が長かったです。ホント。

よりによって過去最高の参加人数なので緊張もMAX。鼻下伸ばしている場合ではありません。
前回のGunma.webでLTしようと思っていたネタでしたので、若干”旬”を逃した感が歪めませんが強行してしまいました。
皆さん生暖かく見守ってくださったのでとても感謝。

LTしたスライドはこんなの。発表したものよりちょっぴり枚数多いです。

感想

なにせプレゼントか無縁の人間なので、とにかくチャレンジのつもりでスライドを作成しました。諸先輩方のスライドを参考に、なんとか形に出来たかな？、と。
5分という短い時間の中でモダンな部分にもまったく触れられず、タイトルに偽りあり！でしたが、そこは大目に見て下さい。

当日出かける間際までスライド完成してないとか、シャベルこと決まってないとか、モニター接続端子が無くて行きながら買っていくとかいろいろあったけど、すごくいい勉強になりました。
次回LTする時は酸素ボンベ持っていったほうがいいかな。
最近はコンビニでも売ってるしね。

あ、スライドのネタはまんま載せてます。
問題がある場合は報告受けたら消します。それ以外は消しませんのであしからず。

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

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

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

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