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>

现在我刚刚给出的要求是表单在窗口调整大小时具有保持逻辑顺序和堆栈的列。

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

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

但是当窗口变小时，窗体应该调整大小并且列堆叠如下：

列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很多用例都有非常有用的例子。

您应该很好地将课程col-xs-12添加到您的列中：

xs获取最小宽度（或sm，具体取决于您需要的宽度）
12表示要跨越的列数，而12表示最大值/完整可用宽度

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

这有帮助吗？

Answer 2

你只是不想过度思考。如果将每个列分组的所有三个输入添加到单个col-md-4中，则此布局的行为与您的行为完全相同。这些列中的每一列现在都是单个网格单元，将在屏幕分辨率低于992px时折叠。在992px及以上时，每列将彼此相邻。

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

在示例的情况下，标签需要在lg断点处宽4格列，以便不会分成单独的行。当然，这为每个输入留下了8个网格列。

运行下面的代码片段，然后点击“整页”选项，这样您就可以调整窗口大小，并分别查看表单在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。在实践中，我会在表单级别使用一个类，所以我可以更具体地定位这些输入而不是普遍的所有输入，或者将每个单独的标签+输入分组包装在带有类的div中，并将边距应用于底部那个班。此外，我可能会将其放在媒体查询中，以便我可以控制在不同断点处应用的边距量。

Answer 3

感谢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（将预览窗格放大以查看未堆叠的列）

Answer 4

<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小屏幕，移动

你可以按照自己的意愿使用它。我在这里写的代码只是表单将在移动版中显示为堆栈。

具有3列的水平形式，在调整大小时堆叠

4 个答案: