Twitter bootstrap 3 具有3列的水平窗体，在调整大小时堆叠

在我目前正在进行的web项目中，我们使用的是Bootstrap3。我们使用的是带有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>

电子邮件
查看Bootstrap 3网格系统的文档：
很多用例都有非常有用的例子

将类
col-xs-12
添加到列中应该很好：


最小宽度的
xs
（或
sm
，取决于您需要的宽度）
12
表示要跨越的列数，而12是最大/全部可用宽度

这将使它们堆叠在小屏幕上

这有帮助吗？

<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适用于中等屏幕人渣笔记本电脑

col-lg-4用于大屏幕

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

col-xs-12适用于xtraa小屏幕移动设备

你可以按你的意愿使用它。我在这里写了代码，在移动版本中，只有表单才会显示为堆栈。
您只是不想过度思考。如果将每个列分组的所有三个输入都添加到一个col-md-4中，则此布局的行为与您所希望的完全相同。这些列中的每一列现在都是一个网格单元，将在低于992px的屏幕分辨率下折叠。在992px及以上，每列将彼此相邻

现在您只需要将输入嵌套在这些列中记住在引导中嵌套col类时，必须添加row类，否则将得到双重填充。因此，要确定何时将标签放在左侧以及何时将标签放在输入上方，您可能需要进行一些尝试和出错。在下面的示例中，我发现对于我使用的标签长度，除了最大的屏幕（引导中的1200px断点）之外，我需要为所有屏幕堆叠标签，否则标签将包装到第二行。你可以在每次输入后添加一个响应重置，如果你想让标签包装，但我不喜欢它的外观

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

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


@import”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
输入{
边缘底部：10px；
}

A列输入1
A列输入2
B列输入1
B列输入2
列C输入1
C列输入2
感谢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>


A列输入1
A列输入1
A列输入2
A列输入2
A列输入3
A列输入3
B列输入1
B列输入1
B列输入2
B列输入2
B列输入3