*

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


 
 

関連記事

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

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

記事を読む

FL STUDIO & KORG microKEY-25BKRDをツナグ

VirtualBox FL Studio で microKEY-25BKRDをツナグのがこれまた^^

記事を読む

Brushless GimbalをSimpleBGC_2_40b6にMacでアップデートしてみる

SimpleBGC はソフト自体のアップデートと、それに対応した本体への Firmware をアップ

記事を読む

到着!Aluminum Case for 32bit AlexMos Brushless Gimbal Controller

今まで気が付かなかったのですが、コメントは名前とメアドが必須。名前はともかくメアドまでって面倒だし抵

記事を読む

DJI PHANTOM 4 Advanced用の小物を購入

その後、なかなか良い天気になりません。ごくまれに晴れても、その日は忙しかったりでテスト撮影できず。小

記事を読む

ペヤングやきそば「和風 焼き蕎麦」は醤油味

偶然みかけたペヤングの焼き蕎麦なる商品。見るからに不味そうなので買ってみました。どうみても、美味しく

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

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

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

CeVIO Creative StudioがMacのWin10で認証失敗

久しぶりに更新できました。 この時期は寒くて...と言い訳から入

xismoを使ってみて覚えたところと謎なところ(追記あり)

謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の

Macで MikuMikuDanceができる〜 nanoemというフリーソフト

blenderが難しすぎて挫折しかかっていたときに知った xismo

wacom Intuos ペンモデルの small (ミントブルー)がかわいい

誰がなんと言おうと美少女です! すっかり xismoが気に入って

無料3D作成ソフト xismo がすごくわかりやすい感じ

こんばんは 心は美少女です。 Blenderを使いこなす、という

→もっと見る




  •  

PAGE TOP ↑