使用 Twitter Bootstrap 的标题中的搜索框

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 标签对我来说很有效。您还需要记住清除浮动，这就是标题底部的行没有被推到标签底部的原因。

因此，添加以下 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：固定; 设置搜索框的位置。

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