CSSフレームワーク「Bootstrap」のバージョンは、今「4」が最新です。
getbootstrap.com
右寄せの変更
BootstrapでHTML要素を右寄せするとき、以前は「pull-right」というクラスを記述してました。
新しいバージョン4では、「pull-right」だと右寄せができませんでした。
(=右寄せの指定方法が変わってました。)
オンラインドキュメントを検索したら、変更点が紹介されていました。
getbootstrap.com
Utilities
Display, hidden, and more:
:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
Type:
Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
- 「pull-left」や「pull-right」というクラスは削除
- 代わりに、「float-{sm,md,lg,xl}-{left,right,none}」「text-{sm,md,lg,xl}-{left,center,right}」というクラスを追加
以下に最新の説明がありました。
Floatの右寄せ指定方法
getbootstrap.com
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
レスポンシブデザインの場合は、以下のようなクラスも指定できる、とのこと。
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
Textの右寄せ指定方法
getbootstrap.com
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
具体的には「float-right」とか「text-right」みたいなクラスの書き方をすれば、右寄せができました。
バージョンアップしたときは、「Migration」(移行)の説明は読んでおいたほうがいいですね?(汗)