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

オプションの使用例

解説はこちら。

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.