下拉菜单未正确放置在模态 header

Question

我有一个 bootstrap-modal，带有 header、body 和页脚。

现在我要在模态 header 中添加 dropdown-button 和 dropdown-menu。按钮位置正确，但如果我打开菜单，菜单位于中间。

这里是代码：

<div class="modal-header">
   <div class="row">
      <div class="col-xs-6">
         <h4 class="modal-title" id="myModalLabel">Max Muster</h4>
      </div>
      <div class="col-xs-6 text-right">
         <div class="dropdown open">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            <i class="fa fa-plus"></i>
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
               <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
               <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
               <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
               <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>

有什么建议吗？

提前致谢。

Answer 1

您在第二列 col-xs-6。

<div class="row">
    <div class="col-xs-6">First column</div>
    <div class="col-xs-6">Second column</div>
</div>

第二列的开始在左边，所以你必须设置 class pull-right

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">

http://jsfiddle.net/9nf0afa5/

下拉菜单未正确放置在模态 header

Dropdown not placing correct in modal header

html

css

twitter-bootstrap

drop-down-menu

bootstrap-modal