具有 3 列的水平表单在调整大小时堆叠

Question

在我目前正在处理的 Web 项目中，我们正在使用 Bootstrap 3. 我们正在使用具有 3 列的表单水平布局 - 因此标签显示在表单输入的左侧。基本标记如下所示：

<form class="form-horizontal">
    <div class="form-body">
        <div class="col-md-4">
              <label for="email" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
         </div>
         <div class=col-md-4">
            <!-- another input here -->
         </div>
         <div class="col-md-4">
            <!-- another input here -->
         </div>
     </div>
 </form>

现在，我刚刚得到的要求是让表单的列在 window 调整大小时保持其逻辑顺序和堆栈。

当浏览器 window 为桌面大小时，它应该如下所示：

A 列字段 1 B 列字段 1 C 列字段 1
A 列字段 2 B 列字段 2 C 列字段 2
A 列字段 3 B 列字段 3 C 列字段 3

但是当 window 变小时，表格应该调整大小并且列堆叠如下：

A 列字段 1
A 列字段 2
A 列字段 3

B 列字段 1
B 列字段 2
B 列字段 3

C 列字段 1
C 列字段 2
C 列字段 3

这可以用 Boostrap 实现吗？

Answer 1

查看 Bootstrap 3 的网格系统的文档： http://getbootstrap.com/css/#grid 许多用例都有非常有用的示例。

你应该很好地将 class col-xs-12 添加到你的列中：

xs为最小宽度（或sm，取决于你需要的宽度）
12 表示要跨越的列数，而 12 是 maximum/the 完整可用宽度

这应该可以让它们堆叠在小屏幕上。

这有帮助吗？

Answer 2

<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
              <label for="email" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
         </div>
         <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
            <!-- another input here -->
         </div>
         <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
            <!-- another input here -->
         </div>

col-md-4 用于中等屏幕 scuh 作为笔记本电脑

大屏幕的 col-lg-4

col-sm-4 适用于平板电脑等小屏幕

col-xs-12 for xtraa small screen, mobile

你可以随心所欲地使用它。我在这里写的代码只有表格会在移动版本中显示为堆栈。

Answer 3

你只是不想想太多。如果您将每个列分组的所有三个输入都包装在一个 col-md-4 中，则此布局的行为完全符合您的预期。这些列中的每一列现在都是一个单独的网格单元，将在屏幕分辨率低于 992px 时折叠。在 992px 及以上，每列将彼此相邻。

现在您只想将输入嵌套在这些列中。记住，当你在 Bootstrap 中嵌套 col- classes 时，你必须添加一行 class 否则你会得到双重填充。因此，要确定何时将标签放在左侧以及何时将它们放在输入上方，您可能需要进行一些反复试验。在下面的示例中，我发现对于我使用的标签的长度，我需要为除了最大屏幕（Bootstrap 中的 1200px 断点）以外的所有内容堆叠标签，否则标签将换行到第二行.如果您希望标签换行，您可以在每次输入后添加响应式重置，但我不喜欢它的外观。

在示例的情况下，标签在 lg 断点处需要有 4 个网格列宽，才能不中断到单独的行上。当然，这会为每个输入留下 8 个网格列。

运行下面的代码片段，然后点击整页选项，这样您就可以调整 window 的大小并查看表单在 sm/xs、md 和 lg 上的表现分别断点。

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
  
input {
  margin-bottom: 10px;
}

<form class="form-horizontal">
    <div class="form-body">
        <div class="col-md-4">
            <div class="row">
                <label for="a1" class="col-lg-4 control-label">Col A Input 1</label>
                <div class="col-lg-8">
                    <input class="form-control" id="a1" placeholder="Col A Input 1" />
                </div>
                <label for="a2" class="col-lg-4 control-label">Col A Input 2</label>
                <div class="col-lg-8">
                    <input class="form-control" id="a2" placeholder="Col A Input 2" />
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <label for="b1" class="col-lg-4 control-label">Col B Input 1</label>
                <div class="col-lg-8">
                    <input class="form-control" id="b1" placeholder="Col B Input 1" />
                </div>
                <label for="b2" class="col-lg-4 control-label">Col B Input 2</label>
                <div class="col-lg-8">
                    <input class="form-control" id="b2" placeholder="Col A Input 2" />
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <label for="c1" class="col-lg-4 control-label">Col C Input 1</label>
                <div class="col-lg-8">
                    <input class="form-control" id="c1" placeholder="Col C Input 1" />
                </div>
                <label for="c2" class="col-lg-4 control-label">Col C Input 2</label>
                <div class="col-lg-8">
                    <input class="form-control" id="c2" placeholder="Col C Input 2" />
                </div>
            </div>
        </div>
    </div>
</form>

编辑：

根据您的评论，我将 margin-bottom: 10px 添加到演示中的输入选择器。在实践中，我会在表单级别使用 class，这样我就可以更具体地只针对这些输入而不是我所有的输入，或者将每个单独的标签 + 输入分组包装在 div 中class 并将边距应用到 class 的底部。另外，我可能会将它放在媒体查询中，以便我可以控制在不同断点处应用的边距量。

Answer 4

感谢 jme11 让我走上正轨。我想我已经弄明白了——下面的布局正是我需要的外观和行为。希望这会在将来帮助其他人。

         <form class="form-horizontal">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col A Input 1</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col A Input 1</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col A Input 2</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col A Input 2</div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col A Input 3</label>
                                            <div class="col-md-8">
                                                <div class="form-control-static">Col A Input 3</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col B Input 1</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col B Input 1</div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col B Input 2</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col B Input 2</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col B Input 3</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col B Input 3</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col C Input 1</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col C Input 1</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col C Input 2</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col C Input 2</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Col C Input 3</label>
                                            <div class="col-md-9">
                                                <div class="form-control-static">Col C Input 3</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>

Plunkr example（放大预览窗格以查看未堆叠的列）

具有 3 列的水平表单在调整大小时堆叠

Horizontal form with 3 columns that stack when resized

twitter-bootstrap-3