Bootstrap 内联表单对低宽度没有响应？答案

【问题标题】：Bootstrap inline form is not responsive on low width?Bootstrap 内联表单对低宽度没有响应？
【发布时间】：2014-03-30 03:51:42
【问题描述】：

我已经使用引导程序完成了一个内联表单。如果我尝试最小化或缩小浏览器的宽度，它不会响应。不确定，但引导带内联表单没有响应吗？控件只是相互混乱。我不能改变页面的设计。请指导我如何纠正这个问题，使其工作不混乱，并以干净清晰的方式响应。

可以的时候全宽表格：

最小化浏览器或缩小屏幕宽度时的表单：

这是我的标记：

<div class="row">
    <div class="col-md-4">
    <div class="col-md-3">
    Round:
    </div>

    <div class="col-md-1">
    <input class="form-control" type="text" id="roundNumber"  value="<%= Model.Round %>" />
    </div>
    </div>
    <div class="col-md-4">
    <input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
    </div>
    <div class="col-md-4">
    <input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history"></div>        
</div>

【问题讨论】：

我很困惑，这不像 Bootstrap 为内联表单提供的标记吗？ getbootstrap.com/css/#forms你期待发生什么？
@davidpauljunior 正如我在问题中解释的那样，低宽度控件相互混合（混乱）。默认情况下，它们不是分开的并且没有像引导程序提供的那样正确对齐。我想修复它。
@davidpauljunior 在您的示例中查看内联表单并尝试慢慢减小页面宽度。它反应灵敏，但在我的图像中它们只是混乱。
它们不是杂乱无章的，它们是相互叠放的，因为在小型设备上@987654325@ 没有指定宽度，所以它是全宽度<div>。要么使用 Bootstrap 建议的标记，要么尝试使用 col-xs-4 类而不是 col-md-4
@davidpauljunior 谢谢它更好，但我怎样才能让它们像其他引导页面一样进入不同的行？即使在你的例子中也是如此。通过您的标记，它在较低的屏幕上工作正常，但更短于它们再次呈现在彼此上。请指教

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

您可能希望使用类前缀 .col-xs- 而不是 md Grid Options:

<div class="row">
    <div class="col-xs-4">
        <div class="col-xs-3">Round:</div>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>">
        </div>
    </div>
    <div class="col-xs-4">
        <input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
    </div>
    <div class="col-xs-4">
        <input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history">
    </div>
</div>

【讨论】：

Burms 谢谢它更好，但我怎样才能让它们像其他引导页面一样进入不同的行？即使在你的例子中也是如此。通过您的标记，它在较低的屏幕上工作正常，但更短于它们再次呈现在彼此上。请指教
我不太清楚你所说的让它们出现不同的行是什么意思，你能改写你的问题吗？
我觉得这个方法比较有效