1

検索ボタン付きの検索フォームが列領域全体に表示されるようにする必要があります。

アップデート：

私はここで見ることができるコードの簡略化されたバージョンを持っています：http： //jsfiddle.net/persianturtle/Trgr6/10/

別の以前のjsFiddleバージョンはここにあります：

これがライブの例ですhttp://jsfiddle.net/Trgr6/3/

古いバージョンを埋めるための領域全体の例として、黒い領域が表示されます。

新しいバージョンでは、検索フォームの幅を次の幅に設定しようとしました。

.row-fluid .span9 { }

クラス幅。これは次のとおりです。

width: 74.46808510638297%;

そしてコード：

<div class="searchbar">
    <div class="container">
        <div class="row-fluid">     
            <div id ="test" class="span9">

                 <form class="form-search">
                     <div class="input-append span12">
                        <input type="text" class= "search-query" placeholder="Enter Search">
                        <button type="submit" class="btn">Search</button>
                    </div>
                 </form>

            </div>      

            <div class="span3 info">
                .span3 column
            </div>
        </div>
    </div>
</div>
4

1 に答える 1

0

私があなたのフィドルを更新したかどうかはわかりませんが、ええ。これは機能します。

http://jsfiddle.net/xWTuF/2/

inline-block からブロックへの入力追加をオーバーライドし、ボタン全体の幅と入力のパディングに等しいパディング右を指定します。入力の幅を 100% にします。

.container .form-search .input-append {
    display:block;
    padding-right:99px
}
.input-append input.search-query {
    width:100%
}

ああ、span12も削除しました。必要ありません。html を次のように再編成しました。

<div class="searchbar">
    <div class="container"> 
        <div class="row-fluid">
            <div class="span9">
                <form class="form-search">
                    <div class="input-append">
                        <input type="text" class="search-query">
                        <button type="submit" class="btn">Search</button>
                     </div>
                </form> 
            </div>
            <div class="span3 info">
                .span3 column
            </div>
        </div>
    </div>
</div>
于 2013-02-13T03:43:44.020 に答える