フローティング・ライト・トグル・エレメントの右側にブートストラップのドロップダウン・メニューを配置する方法は？

Question

いいえ、タイトルは自己説明的である必要があります。そして、はい、ブートストラップのドキュメントでは、私が似たような状況で動作するように、クラスdropdown-menu-rightを追加したことがわかります。

これは、下のリンクでちょっとした作品です。ドロップダウンはトグル要素の右側にあります。

、

http://plnkr.co/edit/gkbEkv86dTTvWZCAeUp0?p=preview

は、しかし、私は実際に何をしようとしていること（見出しの末尾に）右にトグル要素フロートを持つことである（ドロップダウンは、2番目のタブにあります）このような：

http://plnkr.co/edit/0qMNLgabRrfAC2Evw1ri?p=preview

しかし、あなたが見ることができるように、ドロップダウンはまだ以前と同じ場所に提示されています。これは、トグル要素が現在右にあるという事実を無視します。

私はAngular UIディレクティブと共にBootstrapを使用しています。しかし、私はかなりの問題は、CSS相対的であることを確信しています。

これが問題だとわかったら、要素に相対的な相対位置を設定し、ドロップダウンリストの位置をright: 0に変更しますが、機能しませんでした。

右に浮かんでいるドロップダウンのトグル要素をどのようにしてから、ドロップダウンメニューを表示してフロートを考慮することができますか？

ありがとうございました。

Answer 1

.panel-heading > .dropdown { 
    position: static; 
} 

... 2番目のplunkrに適用されます。

position:relativeを.panel-headingにインラインで適用しないでください。あなたはCSSで一度だけ行うべきです。プロジェクトの残りの部分に影響を与えないようにするには、selectorに特定のIDを付けます。

#right-box .panel-heading { position: relative; }