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

ドロップダウンのサンプル

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

オプションの使用例

解説はこちら

offset(ターゲットに対するドロップダウンのオフセット値)

data-offset="0" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のドロップダウンのdata-offset="0"の使用例 by cccabinet (@cccabinet) on CodePen.

data-offset="20"(右へ20pxずらす)

See the Pen Bootstrap4のドロップダウンのdata-offset="20"の使用例 by cccabinet (@cccabinet) on CodePen.

data-offset="20,10"(右へ20px、下へ10pxずらす)

See the Pen Bootstrap4のドロップダウンのdata-offset="20,10"の使用例 by cccabinet (@cccabinet) on CodePen.

flip(メニューを表示させるスペースが無い場合は反対側に表示)

data-flip="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のドロップダウンのdata-flip="true"の使用例 by cccabinet (@cccabinet) on CodePen.

data-flip="false"

See the Pen Bootstrap4のドロップダウンのdata-flip="false"の使用例 by cccabinet (@cccabinet) on CodePen.

boundary(ドロップダウンメニューのオーバーフローを制約する境界)

data-boundary="scrollParent" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のドロップダウンのdata-boundary="scrollParent"の使用例 by cccabinet (@cccabinet) on CodePen.

data-boundary="window"

See the Pen Bootstrap4のドロップダウンのdata-boundary="window"の使用例 by cccabinet (@cccabinet) on CodePen.

data-boundary="viewport"

See the Pen Bootstrap4のドロップダウンのdata-boundary="viewport"の使用例 by cccabinet (@cccabinet) on CodePen.

reference(ドロップダウンメニューのリファレンス要素)v4.1.0新設

data-reference="toggle" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のドロップダウンのdata-reference="toggle"の使用例 by cccabinet (@cccabinet) on CodePen.

data-reference="parent"

See the Pen Bootstrap4のドロップダウンのdata-reference="parent"の使用例 by cccabinet (@cccabinet) on CodePen.

display(Popperを動的配置に使用)v4.1.0新設

data-display="dynamic" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のドロップダウンのdata-display="dynamic"の使用例 by cccabinet (@cccabinet) on CodePen.

data-display="static" Popperを無効にする

See the Pen Bootstrap4のドロップダウンのdata-display="static"の使用例 by cccabinet (@cccabinet) on CodePen.