Question

<div class="container-fluid">
<div class="row-fluid">
    <div class="span6 well">
        <div class="clearfix control-group">
            <div class="input input-prepend">
                <label class="add-on"><input type="checkbox" /></label>
                <input class="input-small" type="text" placeholder="Cost"/>
            </div>
        </div>                                      
    </div>

    <div class="span6 well">
            <div class="clearfix control-group">
                <div class="input input-prepend">
                    <label class="add-on"><input type="checkbox" /></label>
                    <input class="input-small" type="text" placeholder="Cost Range"/>
                </div>
            </div>                                      
    </div>
</div>
</div>

当窗口最大化时看起来很好。 enter image description here

当窗口大小减小时。

enter image description here

需要帮助重新调整窗口大小的输入文本大小。

整个表单：myForm

Answer 1

<label class="add-on span1"><input type="checkbox" /></label>
<input class="input-small span11" type="text" placeholder="Cost Range"/>

在标签和输入上添加这样的类..类似地，您也可以在控制组上添加类...并且可以通过使用span1-span12或span *

来改变宽度

如果它仍然在一行中创建问题包装控件组..

Answer 2

我想知道你的CSS是否存在问题或者你做过任何自定义。拿上面你的确切html和默认的Bootstrap CSS，一切看起来都不错：

Live view

Edit

祝你好运！

修改
根本原因是，当视口变窄时，没有空间在您给出它们的空间中显示成本和成本范围输入块。

作为示例，check out this variation我在右侧列添加了更多宽度。结果有点好，虽然不完美。

为什么不在不同的行上显示成本和成本范围输入？

bootstrap响应网格中的input-prepend

2 个答案: