Bootstrap4.6でtable-responsive内でドロップダウンを表示すると表示が見切れてしまう問題の対応

cyrus07424cyrus07424

Bootstrap4.6では、.table-responsiveの要素内でドロップダウン(.dropdown-menu)を表示すると、ドロップダウン項目が多い場合に.table-responsiveの範囲外にはみ出してしまい、見切れる場合がある。

その場合は、ドロップダウンボタンにdata-boundary="viewport"を指定すれば良い。

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" id="button1" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
        ドロップダウン
    </button>
    <div class="dropdown-menu" aria-labelledby="button1">
        <a href="#" class="dropdown-item">
            メニュー
        </a>
    </div>
</div>

参考(https://stackoverflow.com/a/51992907)