メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

オーバーフローユーティリティ(Overflow) v4.2.1新設

これらの短縮形ユーティリティを使用して、コンテンツが要素をオーバーフローさせる方法を素早く構成。

必要最小限の overflow 機能(要素のはみ出し部分の表示)はデフォルトで2つの値(auto,hidden)に対して提供され、レスポンシブはしない。

見本

.overflow-auto (overflow: auto;)

これは、幅と高さが設定された要素に対して .overflow-auto を使用する例。 設計上、このコンテンツは垂直方向にスクロールする。

.overflow-hidden (overflow: hidden;)

これは、幅と高さが設定された要素に対して .overflow-hidden を使用する例。
設定例
HTML<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 80px;">...</div>
<div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 80px;">...</div>

Sass変数を使用して、scss/_variables.scss$overflows 変数を変更することによってオーバーフローユーティリティのカスタマイズが可能。

【設定】

  • 使用したい要素に .overflow-{auto|hidden} を入れる