bootstrapに480px breakpointを入れたい

と思ったんですよ、唐突に

Bootstrapでグリッドレイアウト組むと、画面解像度の横幅を見て自動でレイアウトを切り替えてくれるんですけど
一番小さいのがxsの768px未満となっていて、スマートフォンの縦持ち(iPhoneだと横320px)なんかもxsに該当しちゃってちょっと扱いにくいんですよね
公式サイトにあるカスタマイズで頑張れば出来るっちゃー出来るんですけど、項目が多すぎて分かりにくすぎる気がするんですよ
むしろ俺がわかりにくかったのですよ、マジ項目多すぎ
で、必要な部分だけコピペして編集してcss書いたっていうのが今回の話。そしてこれはこれで微妙に使いにくいことがわかったのも今回の話

何をしたのか

大したことじゃなくて、bootstrap.cssのcol-xs-Xな部分をまるっとコピーしてcol-vs-X(VerySmall的な意味で)とかに書き換えて
offsetとかpushとか全部コピって増やしてあげるだけ
元のbootstrap.cssに上書きしちゃうとバージョンアップの時に困るので、別ファイルにした
なおファイルのアップロードはないので各自頑張りましょう、というか同じ発想の下記問題の対応をされたと思われるcssファイルがエンタリアルさんところで公開されてますのでこちら参照でも
ただ、上記ファイルを俺は使っていないので以下の現象が起きるのかは分かりません詳細は各自ご確認ください
—- 2015/01/12 01:10頃追記 —-
2014/12/14付けで、エンタリアルさんところで公開されているcssファイルが更新されて1.0.1になっていたので文面等訂正しました
—- 追記おわり —-
関係ないんですけど、エンタリアルさんライセンス周りもうちょっと分かりやすくなりませんかね・・・ダウンロードしたファイルに記載がないと使うの怖いっす・・・

何がダメなのか

bootstrap.cssの次の行にbootstrap-vs.cssとか入れて読み込ませると、480px breakpointの完成です!お疲れ様でした!!
と俺も思ってたんですけど、解像度の変わる環境で使うとちょっと不都合というか、cssの挙動としては正しいのだけど意図しないことが起きるんですよ

例えば、class="col-sm-6 col-xs-8 col-vs-12" みたいな指定すると
768px以上992px未満で6カラム、480px以上768px未満で8カラム、480px未満で12カラムだと思うじゃないですか
ところが、bootstrap-vs.cssに書かれた col-vs-12 にはメディアクエリーの指定がない上にbootstrap.cssよりも後に読み込んでいるので
col-sm-6 は無視されて、col-vs-12 が適用されちゃうんですよね。つまり
768px以上992px未満で12カラム、480px以上768px未満で8カラム、480px未満で12カラムになっちゃうんですよ
col-xs-8 は後に読み込んでるbootstrap-vs.cssに書いてるので問題ないんですけどね
cssを読み込む順番を変えると、今度は col-vs-12 が無視されて col-xs-8 が適用されるだけで解決になりません

結局どうすれば

上記の問題を無視できるのであれば、手軽だし便利に使っていいと思いますが
そうじゃないならおとなしく公式サイトにあるカスタマイズで頑張るか、コンパイル環境を作ってLESSファイル編集してコンパイルするしか無いと思います
それか、bootstrap自体のバージョンアップの際に気をつける前提でbootstrap.cssに直接書いてしまうか
悩んだ末、俺はコンパイル環境作ることを選びました・・・

Comments (0)

› No comments yet.

Pingbacks (0)

› No pingbacks yet.