css - 使用 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 标签对我来说很有效。您还需要记住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/