ブートストラップ ドロップダウン メニュー フロート問題_html/css_WEB-ITnose

ブートストラップでドロップダウン メニューを学習しているときに、次の状況に遭遇しました:

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">  下拉菜单  <span class="caret"></span>  </button>  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">   …  </ul></div>

ul のクラス名を pull-right または dropdown-menu-right として追加します。これにより、ドロップの方向を変更できます。ダウンメニューの効果は次のとおりです:

デフォルトのスタイルは:

.pull-right の CSS コードを下に貼り付けます

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

ただし、親要素 div のスタイルも設定する必要があります。フロートするには:左! ！ ！

理由:

div はブロックレベル要素であり、親要素の幅を自動的に埋めます。 効果画像:

div の float が left に設定されている場合、div はブロックレベル要素から離れます。ドキュメントフローを作成してボタン要素をラップすると、メニューがボタンの右側に配置されます

追加するものがあれば、コメントを残してください。うーん～～～