*

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


 
 

関連記事

私、初めてなの… DJI PHANTOM 4 ADVANCED 開封編

暑いですね〜 苦節10年。やっとドローン女様が我が家にやってきました。まずは色々アドバイスを頂

記事を読む

スライダーの画角による違い

雨が降っていて夜景テストができなかったので、ちょっとテストしてみたスライダーの映像で本日はお茶を濁し

記事を読む

【雑談】Rode FIlmmaker kit と NOKTON 10.5mmと Mac OSX El Capitan

日曜の夜なので雑談というか特に書くことが無いので暇つぶしというか。 昼間は天気が悪いの

記事を読む

ついに購入!SimpleBGC 32-bit セカンドIMU拡張キット

すっかり梅雨も開けたようで、日差しの痛い季節になりました。連休明けだけど外は紫外線がイッパイなので家

記事を読む

FOTGA リモートコントロールをSONY α6300でレンズを変えて試す

Phantom 4 pro でも買ってやろうかと思ったら微妙な ADVANCED なんてのが発売され

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑