Html 引导输入附加在流体网格上不起作用

我试图使用

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

的全宽。有人知道为什么会发生这种情况或者我遗漏了什么吗？

这里有一个JSFIDLE：

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

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

---

更新的JSFIDLE:

没有不必要的

.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>

走！

---

我通常尝试使用边界框大小模型来解决引导过程中的流动性问题。类似的事情最近对我起了作用：

.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;
}

---

显然，您希望将这些内容都放在表单的范围内，但您已经明白了。

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

.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;
}

---

我们回答你的问题了吗？给我一点时间，我还在我的版面上检查。谢谢。如果您还有任何问题，请告诉我hi@RaphaelRafatpanah，我正在尝试在这个布局中使用它，但它似乎不起作用。这里：出于某种原因，您删除了95%宽度规则，但我将其添加回了。现在，因为它是一个span9，它不会是100%宽度，但它会填满所有的空间，直到span3开始。这有帮助吗？如果没有行流体，我的内部列将无法像文档中所述那样正确浮动。这是一种处理方法，但您还需要将输入的高度增加到28px，以使用边框框来抵消正在应用的填充。：）

.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;
}