Twitter bootstrap 如何在列表上右对齐文本框？

我有一个列表，上面有一个搜索框。我想右对齐搜索框，使搜索框的最右边缘与列表的最右边缘对齐。下面是我正在使用的html片段（以及bootstrap-3）

我创造来展示我现在所拥有的。这将正确地右对齐搜索框，但正如您所看到的，搜索框浮动在页面的右侧。我希望它位于列表之上，而不是浮在列表之上

我该怎么做

以下是小提琴代码：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <form class="pull-right" role="form">
                <input class="form-control" placeholder="Filter" />
            </form>
            <ul>
                <li>...items</li>
            </ul>
        </div>
    </div>
</div>

…项目

您希望在浮动输入之后的空div中使用引导类clearfix。

<div class="clearfix"></div>