Sizing - Bootstrap 4.1 日本語リファレンス

Skip to main content Bootstrapの新しいバージョンがあります。 Menu Bootstrap 入門

• はじめに
• ダウンロード
• ファイル構成
• ブラウザとデバイス
• JavaScript
• テーマ
• ビルドツール
• Webpack
• アクセシビリティ

レイアウト

• 概要
• グリッド
• メディアオブジェクト
• レイアウト用ユーティリティ

コンテンツ

• リブート
• タイポグラフィ
• コード
• 画像
• テーブル
• 図形

コンポーネント

• Alerts
• Badge
• Breadcrumb
• Buttons
• Button group
• Card
• Carousel
• Collapse
• Dropdowns
• Forms
• Input group
• Jumbotron
• List group
• Modal
• Navs
• Navbar
• Pagination
• Popovers
• Progress
• Scrollspy
• Tooltips

ユーティリティ

• Borders
• Clearfix
• Close icon
• Colors
• Display
• Embed
• Flex
• Float
• Image replacement
• Position
• Screenreaders
• Shadows
• Sizing
• Spacing
• Text
• Vertical align
• Visibility

オプション

• アプローチ
• アイコン

マイグレーション Bootstrap について

• 概要
• ブランド
• ライセンス
• 多言語サイト

Sizing

簡単に幅や高さの調節ができます。

幅と高さは _variables.scss の $sizes Sassマップから生成されます。デフォルトでは, 25%, 50%, 75%, 100%が組み込まれています。

Width 25% Width 50% Width 75% Width 100% Width auto

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Height 25% Height 50% Height 75% Height 100% Height auto

<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div> </div>

max-width: 100%; と max-height：100%; も使用できます。

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

Max-height 100%

<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> </div>