html - Bootstrap响应式网格中的输入前置

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>

窗口最大化时看起来不错。

当窗口大小减小时。

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

整个表格：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，我觉得一切都很好：

实时取景

编辑

祝你好运！

编辑
根本原因是，随着视口变窄，在您给它们的空间中没有足够的空间来显示成本和成本范围输入块。

作为说明，请查看这个变体，我在右侧列中添加了更多宽度。结果稍微好一些，虽然并不完美。

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