Twitter Bootstrap - 如何处理同一行上的多个输入和多个屏幕尺寸的表单水平？答案

【问题标题】：Twitter Bootstrap - How to handle form-horizontal with multiple inputs on the same line and multiple screen sizes?Twitter Bootstrap - 如何处理同一行上的多个输入和多个屏幕尺寸的表单水平？
【发布时间】：2014-01-29 18:14:50
【问题描述】：

我正在开发一个至少有 30 多个输入字段的应用程序。我想使用form-horizontal 并将我的标签放在输入字段的左侧。当我在同一行上有多个标签/文本框时遇到问题。例如，我试图适应 City（及其文本框）、State（及其下拉列表）和 Zip Code（及其文本框）。它在宽屏上看起来不错，但是当屏幕缩小到非宽屏时标签开始与其他输入重叠（在平板电脑屏幕尺寸时更糟）。

我怎样才能避免这种情况？每个标签/输入组合是否应该在同一行流体中是其自己的span4？我是否应该尝试将所有内容都放在 span12 的单个 div 中？

我试图找到示例，但我发现的每个示例都没有使用 form-horizontal 并且不是很复杂。我正在使用 Bootstrap 2.3.2。

代码：

<div class="row-fluid">
    <div class="span4">
        @Html.LabelFor(m => m.PrimaryCompanyAddress.City, new {@class = "control-label", @for = "PrimaryCompanyAddress_City"})
        <div class="controls">
            @Html.TextBoxFor(m => m.PrimaryCompanyAddress.City)
        </div>
    </div>
    <div class="span4">
        @Html.LabelFor(m => m.PrimaryCompanyAddress.State, new {@class = "control-label"})
        <div class="controls">
            @Html.StateDropDownListFor(m => m.PrimaryCompanyAddress.State, new {@class = "input-medium"})
        </div>
    </div>
    <div class="span4">
        @Html.LabelFor(m => m.PrimaryCompanyAddress.Zip, new {@class = "control-label"})
        <div class="controls">
            @Html.TextBoxFor(m => m.PrimaryCompanyAddress.Zip, new {@class = "input-mini"})
        </div>
    </div>
</div>

【问题讨论】：

这个问题最好用一个代码示例来解释。你有吗？

标签： css asp.net-mvc twitter-bootstrap

【解决方案1】：

您的主要问题是 Bootstrap 2。它不是为了响应而构建的，而 Bootstrap 3 是。如果您可以升级（诚然这并非易事），那将是您最好的选择。除此之外，您需要使用断点手动处理它。例如，假设您的表单在屏幕宽度低于 1024 像素之前看起来还不错，那么您可以在样式表中添加类似于以下内容的内容：

@media (max-width: 1024px) {
    .input-medium {
        max-width: (whatever)px;
    }
    /* continue tweaking each element until everything fits and looks right */
}

然后，您将继续缩小屏幕宽度，直到它再次中断，然后沿相同的行添加另一个断点。

【讨论】：