とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > サイジング

サイジング

.w-{25|50|75|100} は、25%, 50%, 75%, 100% の横幅を指定します。.w-auto は横幅を自動算出します。

Sample
25%
50%
75%
100%
auto
Code
<div class="w-25 my-box">25%</div>
<div class="w-50 my-box">50%</div>
<div class="w-75 my-box">75%</div>
<div class="w-100 my-box">100%</div>
<div class="w-auto my-box">auto</div>

.h-{25|50|75|100} は、25%, 50%, 75%, 100% の高さを指定します。.w-auto は高さを自動算出します。

Sample
25%
50%
75%
100%
auto
Code
<div class="my-box-light" style="height:160px;">
  <div class="h-25 my-box float-left" style="width:100px;">25%</div>
  <div class="h-50 my-box float-left" style="width:100px;">50%</div>
  <div class="h-75 my-box float-left" style="width:100px;">75%</div>
  <div class="h-100 my-box float-left" style="width:100px;">100%</div>
  <div class="h-auto my-box float-left" style="width:100px;">auto</div>
</div>

.mw-100 などは、下記のスタイルシートを指定します。

Code
<div class="mw-100">...</div>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月13日
http://www.tohoho-web.com/bootstrap/sizing.html