Question

我正在尝试将input-append用于流体行内的搜索输入，但遗憾的是它似乎无法正常工作，因为它不能扩展到容器的整个宽度。

以下是我的示例代码：

<div class="container">
<div class="row-fluid">
<div class="span12">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>
</div>
</div>

但输入不会缩放span12的全宽。有谁知道为什么会这样或者我错过了什么？

Answer 1

这是一个jsFiddle：http://jsfiddle.net/persianturtle/SXcV3/

#appendedInputButton {
    width:100%;
}

我还建议你将span12类用于保存输入的div，而不是输入本身。

更新：由于bootstrap为了美观原因在按钮上添加了一些填充，我将输入按钮宽度设置为95％，没有水平滚动条看起来更好。

更新了jsFiddle：http://jsfiddle.net/persianturtle/SXcV3/1/

Answer 2

对于按钮上的固定宽度，您可以使用不同的技术

.controls { 
    position: relative; 
}

.input-append{
    width: 100%;
}

.input-append input[type="text"]{
    position: absolute;
    width: auto !important;
    margin-right: 42px;
    left: 0px;
    right: 0px;
}

.input-append button{
    width: 42px;
    float: right;
    margin: 0px !important;
    padding: 0px !important;
}

.input-append input[type="text"],
.input-append button{
    height: 42px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -ms-box-sizing: padding-box;
    box-sizing: padding-box;
}

Answer 3

有不必要的.row-fluid和.span12 div。正确的标记是

<div class="container">


    <div class="input-append">
    <input class="span12" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
    </div>

</div>

Working fiddle

Answer 4

我通常尝试使用边框盒大小模型来解决Bootstrap中的流动性问题。这样的事情最近对我有用：

.input-append{
    width: 100%;
}

.input-append input[type="text"]{
    width: 90% !important;
}

.input-append button{
    width: 10%;
}

.input-append input[type="text"],
.input-append button{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

显然你会想把这一切都放在你表格的范围内，但你明白了。

Bootstrap input-append在流体网格上不起作用

4 个答案: