使用 Twitter Bootstrap 的 Header 中的搜索框

Question

我试图在标题的右侧放置一个搜索文本框，但我似乎无法弄清楚如何使用 Bootstrap 2.0.1 来做到这一点。 我正在尝试的代码是

<div class="page-header">
    <h1 class="span2">
        Parts
    </h1>
    <div class="span4">
        <div class="control-group">
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on">
                        <i class="icon-search"></i>
                    </span>
                    <input type="search" class="span3" placeholder="Search" name="search" id="search"/>
                </div>
            </div>
        </div>
    </div>
</div>

但是搜索文本框没有被跨度和偏移量推到右侧，并且标题底部的行没有被推到标签的底部。有什么想法吗？

Answer 1

将float: right 添加到嵌套在.page-header 中的第一个div 标记对我有用。您还需要记住clear your floats，这就是标题底部的行没有被推到标签底部的原因。

所以添加以下 CSS 将解决您的问题：

.page-header {
    overflow: hidden;    /* clear floats */     
}

.page-header div {
    float: right;        /* float search content right */          
}

工作示例：http://jsfiddle.net/7zds9/

编辑

由于某种原因，正如@PlTaylor 所指出的，输入字段在 Chrome 中换成了新行。这可以使用以下 CSS 修复：

.input-prepend input {
    float: left;
}

工作示例：http://jsfiddle.net/7zds9/1/

Answer 2

你可以用这个：

​input {
    float: right;
}​

http://jsfiddle.net/dXJb8/

或者您可以使用position: fixed; 设置搜索框的位置。

http://jsfiddle.net/dXJb8/1/