html - Bootstrap 下拉菜单呈现在错误的位置

Question

我想在页眉中添加一个下拉菜单。我阅读了描述并尝试实现。代码:

<div class="page-header">
 <div class="row">
   <div class="col-md-10">
     <h1>Page <small>Header</small></h1>
   </div>
   <div class="col-offset-md-10">
     <div class="dropdown">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
       <!--<span class="glyphicon glyphicon-cog"></span>-->
         Settings
         <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>
       </ul>
     </div>
   </div>
 </div>

问题是 - 下拉菜单呈现在错误的位置，我用谷歌搜索的解决方案不适合我。我举了个例子:http://www.bootply.com/UKR6JdGVXA

那么，我做错了什么？

Answer 1

因为您的标记不正确。下拉容器扩展到全宽。由于下拉菜单相对于容器绝对定位，因此它显示在左侧。

代替 col-offset-md-10 类使用 col-md-2 来填充 12 列网格的剩余 2 列。

<div class="col-md-2">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            <!--<span class="glyphicon glyphicon-cog"></span>-->Settings <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>
        </ul>
    </div>
</div>

col-offset-... 类用于增加左边距，但它们不会改变宽度。宽度由 col-xx-yy 类控制。

演示:http://www.bootply.com/t6J4PKBsiR