2

我正在尝试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. 有谁知道为什么会这样或者我错过了什么？

4

4 回答 4

2

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

#appendedInputButton {
    width:100%;
}

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

更新：由于 bootstrap 出于美学原因为其按钮添加了一些填充，我将输入按钮宽度设置为 95%，这样在没有水平滚动条的情况下看起来更好。

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

于 2013-02-12T22:20:51.110 回答
1

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

.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;
}
于 2013-07-09T16:58:56.993 回答
0

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

<div class="container">


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

</div>

工作小提琴

于 2013-02-12T22:21:43.540 回答
0

我通常尝试通过使用边界框框大小模型来解决 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;
}

显然，您希望将所有这些都放在表单的范围内，但是您明白了。

于 2013-06-24T17:19:20.063 回答