html - 下拉菜单未正确放置在模式标题中

Question

我有一个 Bootstrap 模式，带有页眉、正文和页脚。

现在我要在模态标题中添加一个带有下拉菜单的下拉按钮。按钮放置正确，但如果我打开菜单，菜单位于中间。

这里是代码:

<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>

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

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

http://jsfiddle.net/9nf0afa5/