*

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


 
 

関連記事

NI MASSIVEのプリセット読み込み操作

MASSIVEのプリセットを読み込む方法について勉強してみます。MASSIVE用として多くのプリセッ

記事を読む

参考にしたい ブラシレスジンバルのカスタマイズ

ただいま32bit化にともなうバランス調整に手間取り、暗闇に足を突っ込んだような雰囲気が漂っています

記事を読む

BUFFALO BSMBB10NWH Bluetooth 3.0対応 BlueLEDマウス NFC tag

センサーケーブルの加工も完了。例のブツは接続不可。というわけでセンサーのキャリブレーションが新しくな

記事を読む

無料のLUT「LUTIFY.ME」をちょっとだけ試してみる

3月23日にGH5が発売されるようです。24万円ですが、内容を見ると順調に進化しているようで、パナソ

記事を読む

VARAVON MOTORROID L1000 でスライダーを電動化

電動化にあたり、色々なメーカーの製品を考えました。もちろんスライダーを新規に購入することも含めて。と

記事を読む

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

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 ↑