bootstrap のボタンドロップダウンの出現位置を固定する方法

twitter bootstrap で、ボタンドロップダウンというものがあります。<button> にドロップダウンを付けて、さらにメニューとかを出すやつです。

こんなの。

このメニューとかが出てくるの領域、どうも自動計算をされているようなのですが、ボタンから見て右、または左に出現位置を固定したい場合があります。そのやり方を書いておきます。

ＨＴＭＬソースが以下。<ul> の中身がドロップダウンする中身なのですが、そこに、left というクラスを追加しています。

<ul class="nav">
  <li><a href="#">Nav Item</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Nav Item</a>
    <ul class="dropdown-menu left">
      <li><a href="#">Item One</a></li>
      <li><a href="#">Item Two</a></li>
    </ul><!-- /.dropdown-menu.right -->
  </li><!-- /.dropdown -->
</ul><!-- /.nav -->

そして、left には、以下のように指定します。

.dropdown-menu.left {
 left:0;
 right:auto;
 &::before {right:auto !important; left:9px;}
 &::after {right:auto !important; left:10px;}
}

もし、左に固定したい場合は、left:0, right:auto をひっくり返しつつ、before, after の中身も left/right をひっくり返せばＯＫですね。