[解決済み] Bootstrap。ドロップダウン・メニューの位置とナバー・アイテムの相対的な関係

質問

次のようなドロップダウンがあります。

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

ドロップダウンの左上隅がテキスト（Action）の左下隅にありますが、ドロップダウンの右上隅の位置がテキストの右下の場所にあるといいのですが。どうしたらいいでしょうか？

どのように解決するのですか？

このような効果を狙っています。

Bootstrap 3.1.0のリリースとBootstrap 4のリリースで、適用すべきクラスが変更されました。もし以下の解決策の一つがうまくいかないようであれば インポートしているBootstrapのバージョン番号を再確認してください。 で、別のものを試してみてください。

Bootstrap 3

v3.1.0以前

を使用することができます。 pull-right クラスを使って、メニューの右側とキャレットを並べることができます。

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

フィドル http://jsfiddle.net/joeczucha/ewzafdju/

v3.1.0以降

v3.1.0以降、ドロップダウンメニューの.pull-rightは非推奨となりました。メニューの右寄せには .dropdown-menu-rightを使用することで、メニューを右寄せにすることができます。右寄せのナビ コンポーネントは、このクラスの mixin 版を使用して、メニューの右寄せを自動的に行います。 を使用して自動的にメニューを整列させます。それを上書きするには、.dropdown-menu-leftを使用してください。

を使用することができます。 dropdown-right クラスを使って、メニューの右側とキャレットを並べることができます。

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

フィドル http://jsfiddle.net/joeczucha/1nrLafxc/

ブートストラップ 4

Bootstrap 4のクラスはBootstrap > 3.1.0と同じですが、それ以外の周囲のマークアップが少し変わっていますので、注意してください。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

フィドル https://jsfiddle.net/joeczucha/f8h2tLoc/