Boostrap CSSを使って自分で書いた横並びのメニューをiPhoneで見たときは縦並びになるようにしたい
公開日:
:
最終更新日:2013/08/15
WEBDESIGN
なげーよ。ってわけで、今回は表題の通り。
お気に入りの Bootstrap だがメニューがイマイチなので自分で ul li とか使って書いたものを iPhoneで見た時には縦に並ぶようにしたいと思ったけど答えが見つからないという話です。
お題はこれ。それぞれの文字数が違うのがポイント。つまり文字数が違っても同じ幅で綺麗に配置したいのです。
<ul> <li><a href="#">ホーム</a></li> <li><a href="#">ホームでしょ?</a></li> <li><a href="#">ホームだ</a></li> <li><a href="#">ホームホーム</a></li> <li><a href="#">ホーム</a></li> </ul>
相変わらずのIEのダメダメぶりに悩まされてしまうが、個人的にIEの古いバージョンは無視する方向なので気にせず、まずは発見したものからメモってみます。
ul{ display:table; width:100%; } li{ display:table-cell; }
この方法だと文字数によってそれぞれの幅が変化してしまうようです。簡単でいいんだけど。
ul { display: -webkit-box; display: -moz-box; width: 100%; } li { -webkit-box-flex: 1; -moz-box-flex: 1; }
これも同様。幅が文字によって変わります。しかし「width: 1000px;」をliに追加すると幅が同じになります。しかしBootstrapで目的のような縦並びにはなりませんでした。
まあ本家のメニューもならないので仕方ないとは思います。要勉強です。こんな役に立たない投稿がゆるされるのだろうか…..今更どうでもいいか(笑)です。
そしてBootstrapでのGridについて。全体が12列。これを3列と9列に大きく分けて、9列に子供Gridを2つ(2列)に分けたい場合。9が割れない…
試してみた。
span4 span4 の場合。最後のspan4 の右側に 1 grid 分の空欄が発生。
span5 span5 の場合。横にならばないで最後のspan5が最初の span5の下に移動する。
だめじゃん(T_T)
Sponsored Link
関連記事
-
-
Pilotfly H1+ お散歩用バッグ ALPHA INDUSTRIES ボディバッグ
久しぶりに一日ノースケジュール。家でまったりしながら天気予報を見るとしばらく晴天は無さそうな雰囲気で
-
-
【読書感想文】やさしくはじめるiPhoneアプリ開発の学校
久しぶりの iPhoneというかXcodeの話です。何気なく本屋で買っておいた書籍「やさしくはじめる
-
-
URSA mini 4.6K と GH4 と α6300の Log を比較してみる
比較してみるとか言ったって、いつものごとく超適当。できれば全てを URSAで撮影したいけど、色々あっ
-
-
BESTEK 12V車用エンジンスターター 13600mAh MRCS001でVARAVON Motorroidを動かす
過日、ふらっと買ってきた VARAVON MOTORROID L1000(過去記事:別窓)について、
-
-
Macbook Pro 13 2011 にSSDを入れてOSもアップデートしたけど
SSDを入れてDVDの場所に古いHDをセットしてみました。このあたりの情報はWEBにいくらでもあるの
ご質問は掲示板へお願いいたします。