如何使用引導程序在搜索輸入字段中附加搜索按鈕

Question

我正在使用一個模板，名稱是Wrapbootstrap中使用Twitter Bootstrap的Treble One Page Rsponsive Theme。 我正在實現模板，遇到了這個小錯誤，令我發瘋。

有一個搜索欄，由<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

我已經用谷歌搜索了這個模板 。

此代碼按預期可在原始模板上運行：

<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轉換為表單，而不是在其中添加新的form元素。