BootstrapのGrid/Layoutを使って、コンテンツを入れ替えるPush/Pullのやり方にハマった件

Bootstrapは、とにかく便利に使わえてもらってます。 だって、通常の案件なら、デザイナーがやってくれる細かなサイト内のパーツデザインが、classテンプレートで簡単にセットすることができるんで、作業効率がとっても捗ります。 ただ、ver3とver4の互換性の無さは正直しんどいので、これから始める人は最新版から使う事をオススメします。 仕事などで既に構築されているバージョンを使わないといけない場合は、我慢してそれぞれのバージョンを極めないといけませんが、まるでPythonエンジニアの２系、３系という話を思い出します。 今回は、そんな便利なBootstrap4のGRID機能におけるコンテンツ入れ替え機能を使おうと思ったらハマってしまったので、その解決方法などを記録に残しておきます。

Push/Pull機能について

Bootstrap Layout push-pull 上記リンクはBootstrapのLayout機能についてのドキュメントページなんですが、今回はここに書かれているPush/Pull機能を使います。 そもそも、何故この機能を使うかというと、下記のようなレイアウトのコンテンツを構築した場合、上部ナビゲーションと、コンテンツと、サイドメニューという構成で、サイドメニューを左側に持ってきたい時に使います。 普通に、記述しているエレメントの順を書き換えてもいいのですが、それだと、このページをスマートフォンなどでみた時、レスポンシブ機能で、。コンテンツは全て縦並びになりますが、その際、サイドメニューがコンテンツより上に表示されることになります。 ナビゲーションのハンバーグアイコン化機能を使って、上部メニューと、サイドメニューをくっつけて折りたたみメニューに入れ込む方法もありますが、今回は、スマホ表示の際は、コンテンツの下にサイドメニューを表示したいので、記述入れ替えをせずに、PC表示の時だけサイドメニューを左にもってきたいという場合に、Push/Pull機能を使うと、簡単に実現できます。

やり方

非常に簡単で、classに下記を記述するだけです。 # Before <div class="row"> <div class="col-md-8" style="background-color:#F00;">col-md-8 push-md-4</div> <div class="col-md-4" style="background-color:#00F;">col-md-4 push-md-8</div> </div> # After <div class="row"> <div class="col-md-8 push-md-4" style="background-color:#F00;">col-md-8 push-md-4</div> <div class="col-md-4 pull-md-8" style="background-color:#00F;">col-md-4 push-md-8</div> </div> いろんなサイトにも書いてますが、ちょっとだけ解説 基本的に、col-md-*で構成されているGRID構成に対してGRIDをPush（右にスライド）とPull(左にスライド)させるように使います。 なので、左右の２つでなくても３つでも４つでもできます。 他サイトに、「push-col-md-*」というような書き方を指定してある事もありましたが、Bootstrap4では、「push-md-*」の記述でOKです。

ハマりどころ

色々なサイトで説明されているので、Bootstrapの搭載ページでは、普通に使えると思って、仕事でサイト構築をする際に記述を入れてみましたが、動きません・・・orz 本家サイトのソースコードを見ながら念のためと思い、ソースコードを再ダウンロードすると、なんと正常動作しました。 どうやら、以前使っていたバージョンは、「Bootstrap ver4.0.0 beta」で今回ダウンロードしたのは「Bootstrao ver4.0.0 alpha6」、普通に考えると、betaなのでalphaの上位互換であると勝手の思い込んでいました。 ちなみになんですが、Bootstrapのバージョンって、ソースコードの最上部を見れば分かるんですね。こういうライブラリはあまりソースコードの中を見ることが無いので、ちゃんとしたバージョン把握の為に、見るクセを付けたほうがいいかもしれません。 いくつかのバージョンヘッダを載せておきますね。 ## Bootstrap 4.0.0 beta # bootstrap.css /*! * Bootstrap v4.0.0-beta (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ ## Bootstrap 4.0.0 alpha 6 # bootstrap.css /*! * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ ## Bootstrap 3.3.7 # bootstrap.css /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ こんな凡ミス、仕事でやってはいけません。 自責の念も込めて、ブログで大公開しておきます。