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

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

位置ユーティリティ(Position) v4.0.0新設

要素の位置をすばやく設定するには、これらの短縮形ユーティリティを使用。

共通の値(Common values)v4.0.0-beta.2新設

位置ユーティリティクラスで迅速に設定可能だが、レスポンシブには未対応

設定例
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

【設定】

  • 通常の位置(position: static):.position-static
  • 相対位置(position: relative):.position-relative
  • 絶対位置(position: absolute):.position-absolute
  • 固定位置(position: fixed):.position-fixed
  • Sticky位置(position: sticky):.position-sticky

 

最上部に固定(Fixed top)

ビューポートの上部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。

設定例
<div class="fixed-top">...</div>

【設定】

 

最下部に固定(Fixed bottom)

ビューポートの下部に、端から端まで要素を配置。プロジェクトの固定位置の影響を理解していることを確認すること。追加CSSを追加する必要がある場合もあり。

設定例
<div class="fixed-bottom">...</div>

【設定】

 

最上部に達すると固定(Sticky top)

スクロールした後、要素をビューポートの上部に端から端に配置。.sticky-top ユーティリティはCSSの position: sticky を使用。これはすべてのブラウザで完全にサポートされていない。

IE10とIE11は position:stickyposition:relative としてレンダリング。そのためスタイルを @support クエリで囲み、適切にレンダリングできるブラウザのみに上部固定を制限。

設定例
<div class="sticky-top">...</div>

【設定】

  • 要素に .sticky-top を入れることで、その要素がスクロールして最上部に達すると固定される(ナビゲーションバーの固定などで使用)

【注意】