Question

我正在使用模板，名称是来自Wrapbootstrap的Treble One Page Rsponsive Theme，它使用Twitter Bootstrap。我正在实施模板并遇到了这个小错误，这让我发疯了。

有一个搜索栏，包含<input>代码和<button>代码。以前它很好，直到我在<form>内进行，搜索栏开始变得怪异。 <input>字段居中，但<button>附加到字段外部，使整个事物不受影响。

这是图像，要清楚：

这是我的代码：

<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

我已用Google搜索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>

主要思想是转换＆＃34;输入 - 附加＆＃34; div成形式，而不是在其中添加新的表单元素。

如何使用bootstrap在搜索输入字段中附加搜索按钮

1 个答案: