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/

使用Twitter Bootstrap在Header中的搜索框

2 个答案:

修改