Question

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

我该如何避免这种情况？每个标签/输入组合应该是同一行流体中的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 */
}

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

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

1 个答案: