*

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


 
 

関連記事

1,000円の3インチ LCDスクリーン サンシールドフードをGH4に

いやぁ〜久しぶりに晴れ間がでました。9月も初旬は晴れると暑いね。しかしこの辺は風がとても冷たくて、湿

記事を読む

User Guide for Neat Video v4 plug-in for Final Cut (Mac) を解読する(1)

解読してみたのは以下のファイルです。かなり適当に訳しているので、間違っている部分があるかもしれません

記事を読む

7インチの外部モニター「エーディテクノ CL75HOX」の調整項目

意外に使う機会が訪れないエーディテクノ 高輝度IPSパネル採用!超薄型軽量7型フィールドモニター C

記事を読む

俺もヤリたい!!って思った動画

AVの話を期待してきた人ゴメン。 目指すものが見えた気がしただけ Tokyo Sto

記事を読む

エーディテクノCL5585H一眼レフカメラ用液晶モニター5型を開封の儀

急遽、外部モニターが無いと不便なので購入しました。とりあえず安いの買って、これから出てくるPanas

記事を読む

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

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 ↑