html - Bootstrap - 搜索表单应该是什么？

Question

我们需要实现带有搜索按钮的搜索表单填满整个栏目区域。

更新:

我有一个简化版的代码，可以在这里查看: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>

Answer 1

我不确定我是否更新了您的 Fiddle，但是是的。这会起作用。

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

覆盖从 inline-block 到 block 的输入追加，并给它一个 padding-right 等于整个按钮宽度和输入上的 padding。给输入宽度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>