html - 如何使用 Bootstrap 在搜索输入字段内附加搜索按钮

Question

我正在使用一个模板，名称是 Wrapbootstrap 的 Treble One Page Rsponsive Theme，它使用 Twitter Bootstrap。我在实现模板时遇到了这个让我抓狂的小错误。

有一个搜索栏，由 <input> 组成标记和 <button>标签。以前很好，直到我把它放在 <form> 中，搜索栏开始表现得很奇怪。 <input>字段居中，但 <button>附加到场外，使整个事物不居中。

这里是图像，要清楚:

picture

这是我的代码:

<div class="row">
        <div class="span8 offset2">
            <div class="input-append">
                <form method="get">
                    <input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
                    <button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
                </form>
            </div>
        </div>
    </div>

Answer 1

我用谷歌搜索了这个 template .

此代码按预期在原始模板上运行:

<div class="row">
    <div class="span8 offset2">
        <form class="input-append" method="get">
            <input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
            <button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
        </form>
    </div>
</div>

主要思想是将“input-append”div 转换为表单，而不是在其中添加新的表单元素。