JavaScript勉強会

JavaScriptの学習日記

Bootstrap v4の右寄せ方法が変更されてた

CSSフレームワーク「Bootstrap」のバージョンは、今「4」が最新です。

 

f:id:jsstudy:20180916152411p:plain

 

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」(移行)の説明は読んでおいたほうがいいですね?(汗)

 

 

Bootstrap 4 フロントエンド開発の教科書

Bootstrap 4 フロントエンド開発の教科書