とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. サイジング

サイジング

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

<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 は高さを自動算出します。

<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 などは、下記のスタイルシートを指定します。

• .mw-100 : max-width : 100% !important;
• .mh-100 : max-height : 100% !important;
• .vw-100 : width : 100vw !important;
• .vh-100 : height : 100vh !important;
• .min-vw-100 : min-width : 100vw !important;
• .min-vh-100 : min-height : 100vh !important;

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