ブートストラップドロップダウンバブルを右揃え（プッシュ右ではない）

89

トップメニューにカートを使用push-rightしています。問題は、ドロップダウンの吹き出しがページから外れることです。バブルを右揃えにして、「クリック」で右揃えにしようとしています

このような

ここに画像の説明を入力してください

HTML：

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

html css twitter-bootstrap

— ない
ソース

2

これは、に入れた方がよいでしょうjsfiddle.netあなたが持っているものを他人を表示します。

— JofryHS 2013

right:0;ドロップダウンを試しましたか？

— Rahul

189

Bootstrap 3.1以降

クラス.dropdown-menu-rightを、クラスドロップダウンメニューを含む同じdivに追加します。

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

ブートストラップ2.3および3.0

クラス.pull-rightを、クラスのドロップダウンメニューを含む同じdivに追加します。

<div class="dropdown-menu pull-right">
    STUFF
</div>

これは、ブートストラップ3.0を使用している私にとってはうまくいくようです

— 会う
ソース

20

v3.1.0以降では、dropdown -menu-rightを使用できます。github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135を

— Laurent Dezitter

19

これは、ブートストラップ・クラスで解決することが可能dropdown-menu-right とdropdown-menu特異的にCSSプロパティを使用してこの問題のためのものであることright: 0;とleft: auto;、それを右に整列させます。

このソリューションは私のために働いています。

ソース-http : //getbootstrap.com/components/#btn-dropdowns-dropup（このための開発者ツールに移動）

— ジャスプリート・シン
ソース

1

はい、これは正しいソリューションです（Bootstrap 3.3.7）。（ボタンではなく）メニューオプションを含むにクラスdropdown-menu-rightを追加してくださいul

— Miguel

6

<div class="dropdown-menu dropdown-menu-right">

これはブーストラップ4.2.1でまだ機能しています:)

— ゲオルギ・ピーエフ
ソース

5

でbootstrap v 3.1.0、この質問に対する答えは異なります。

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>

— コーディングマニア
ソース

2

はい、わかった！

position:relative;left:0 オン <ul class="dropdown-menu">

— ない
ソース