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

Question

我正在开发一个至少有 30 多个输入字段的应用程序。我想使用 form-horizo​​ntal 并将标签放在输入字段的左侧。当我在同一行上有多个标签/文本框时，我遇到了一个问题。例如，我正在尝试调整城市(及其文本框)、州(及其下拉列表)和邮政编码(及其文本框)。它在宽屏上看起来不错，但当屏幕缩小到非宽屏时标签开始与其他输入重叠(在平板电脑屏幕尺寸时更糟)。

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

我曾尝试寻找示例，但我发现的每个示例都没有使用水平形式，而且也不是很复杂。我正在使用 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>

Answer 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 */
}

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