Twitter Bootstrap - <form> 的两列布局答案

【问题标题】：Twitter Bootstrap - Two Column layout for <form>Twitter Bootstrap - <form> 的两列布局
【发布时间】：2015-07-27 21:20:30
【问题描述】：

在 Bootstrap 2.3 中，是否有一种标准化的方式来为带有标签/输入/操作的 HTML <form> 提供两列布局？我在文档中没有看到任何内容。

我想要的示例图片：http://i.imgur.com/3o6IoN4.png

顺便说一句，我需要有一个纯色背景色，它跨越div.span12 或其他封闭容器的整个宽度。拥有两个.span6 会导致中心的背景颜色中断（我想可以通过将两个.span6 包装在div.clearfix 中并应用背景类来解决？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

简单的东西。将引导行带入父 div 并将该 div 的背景设置为您选择的颜色。

标记：

<div id="background-color">
<form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
<div class="row-fluid">

<div class="span6"> <!-- FIRST COLUMN -->
<label>First Name</label>
  <label for="textfield"></label>
  <input type="text" />
  <label>Last Name</label>
  <label for="textfield"></label>
  <input type="text"  />
</div>

<div class="span6"> <!-- SECOND COLUMN -->
<label>Other</label>
  <label for="textfield"></label>
  <input type="text" />
  <label>Fields</label>
  <label for="textfield"></label>
  <input type="text"  />

  <input type="submit" name="button" id="button" value="Submit" />
</form> <!-- END THE FORM -->
</div>
</form>

</div> <!-- End row -->

</div> <!-- END BACKGROUND -->

CSS：

#background-color {background-color: #CCC;}

希望对你有帮助

【讨论】：

这对我非常有帮助。非常感谢。
这在 Bootstrap 3 中是如何工作的？我只使用 col-xs-6 吗？

【解决方案2】：

根据我对 Bootstrap 3 的理解，这些更改是必需的；

所有代码位于容器中以访问网格系统info here
新版本的跨度到列
使用适合您要求的设备类info here
标签和控件包装在表单组中，用于间距info here
form-horizontal 的表单类消除了对行 div 的需要（我使用了没有行的嵌套列，似乎使用 form-horizontals 函数可以正确显示）

如图所示用于框定表单的面板

<div class="container">
    <div class="panel panel-default" style="background-color: #CCC">
        <div class="panel-body">
            <form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM -->
                <div class="col-sm-6"> <!-- FIRST COLUMN -->
                    <div class="form-group">
                        <label for="inputFirstname" class="col-sm-4 control-label">First Name</label>
                        <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputFirstname" placeholder="First Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputLastname" class="col-sm-4 control-label">Last Name</label>
                        <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputLastname" placeholder="Last Name">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"> <!-- SECOND COLUMN -->
                    <div class="form-group">
                        <label for="inputEmail" class="col-sm-4 control-label">Email</label>
                        <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputUsername" class="col-sm-4 control-label">Username</label>
                        <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                        </div>
                    </div>
                </div>
        </form> <!-- END THE FORM -->
        </div>
    </div><!-- END PANEL -->
</div>

【讨论】：