Question

我们需要实现带搜索按钮的搜索表单填充整个列区域。

更新：

我有一个简化版的代码，可以在这里查看：http://jsfiddle.net/persianturtle/Trgr6/10/

另一个，以前的jsFiddle版本在这里：

您将看到黑色区域作为填写旧版本的整个区域的示例。

在新版本中，我尝试将搜索表单的宽度设置为：

的宽度

.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

我不确定我是否更新了你的小提琴，但是，是的。这将有效。

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

覆盖从内联块到块的输入追加，并为其赋予一个等于整个按钮宽度和输入上的填充的填充权限。输入的宽度为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>

Bootstrap - 搜索表单宽度应该是多少？

1 个答案: