bootstrap-4 - Bootstrap Navbar ドロップダウン メニュー アイテム 右

Question

下の図に示すように、ベルのアイコンをクリックすると、アイコンの右下にドロップダウン メニューが表示されます。このドロップダウン メニューを右下ではなく左下に表示したい。私は何をすべきか？

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      ...
    </div>
  </div>
</nav>

Answer 1

ブートストラップ 5 (2021 年更新)

dropdown-menu-endのクラスを使用してdropdown-menu、メニュー内の項目を右揃えにします。

<div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

https://codeply.com/p/kWLLKdjdpC

ブートストラップ 4 (元の回答)

このクラスを使用してdropdown-menu-right、メニュー内の項目を右揃えにします。

<div class="dropdown-menu dropdown-menu-right text-right">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

http://codeply.com/go/6Mf9aK0P8G

Answer 2

Bootstrap4-Beta の更新:

bootstrap4 beta にバグがあるため、追加する必要がありました

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

それを機能させるために。

Answer 3

add dir="rtl"で変更しました

<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item " href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
</div>