*

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


 
 

関連記事

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど内容がわからないものなどをメモ

記事を読む

no image

究極のKOMPLETE懸賞 - 50品を賞品にご用意!

Native Instrumentsの懸賞がメールで来た。はやりのFaceBookでイイネすると応

記事を読む

no image

恋に落ちるブログを作ってみる(3)

CSSや画像のURLをスマートに書くんだ編のはじまりはじまり〜 いったいつになったらブログを書

記事を読む

iPad で WordPressを更新する時に使うアプリ

お出かけ先でもブログの更新をしたい時がありますよね?できたらiPadだけで簡単に作業できたらいいなと

記事を読む

SimpleBGC GUI の RCタブ「RCコントロール」欄

NEBULA 4000 Lite Gimbal に関して、皆さん興味があるようで、コメントが追いつけ

記事を読む

ebayを歩いていて気になったブツをメモしてみる(カメラリグ編)

折角自作のマットボックスが仕上がってケージも来たのに肝心のお日様がガッツリでてきません。テスト撮影も

記事を読む

ご質問は掲示板へお願いいたします。

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

SONY α6300 ピクチャープロファイルの比較検討(最終)

欲しかった Kontakt 5 - Native Instrument

可変NDフィルターの色かぶりを調整する【追試あり】

しかしセキが止まりませんな。既に二ヶ月近くゴホゴホ。鼻水ずるずる。熱は

SONY α6300 ピクチャープロファイルの比較検討(動画編)

前回の「SONY α6300 ピクチャープロファイルの比較検討」に引き

SONY α6300 ピクチャープロファイルの比較検討

最近はa6300を使う機会が増えています。そうなると6500が気になり

【妄想】片手持ちハンドヘルド 3軸ジンバルスタビライザーの比較

未だに風邪が抜けません。もう一ヶ月以上...どうやら今年の風邪は長引く

→もっと見る




  •  

PAGE TOP ↑