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 到 block 的 input append，并为其赋予一个 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>
于 2013-02-13T03:43:44.020 回答