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类控制。

Bootstrap下拉列表呈现错误的位置

1 个答案:

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