带有引导程序 3 和 colspan 的 2 列表单布局

Question

我正在尝试设计一个具有两列表单布局的表单。两列下面应该有一行（就像普通 HTML 表格中的 colspan = 2）。

This design should not use table-reponsive and should be based solely on the form-horizontal, form-group and row, col-md-*, col-md-push-*, col-md-pull-* etc.

 I am facing the problem with aligning the row with two cols below with the above rows with 4 cols.

A snapshot of the code run in jsfiddle

jsfiddle 是http://jsfiddle.net/Kamalika/sLyu52rg/

我正在使用引导程序 3

标记如下

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<div class="form-horizontal">
       <div class="row">
            <div class="col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="inputName" class="col-md-4 control-label">Name:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="inputName" placeholder="Name">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="inputDepartment" class="col-md-4 control-label">Department:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="inputDept" placeholder="Department">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-10">
                <div class="form-group">
                    <label for="inputPassword" class="col-md-4 col-md-pull-1 control-label">ABCD:</label>
                    <div class="col-md-8">
                       <textarea class="form-control" id="textarea" name="textarea">default text</textarea>                        
                    </div>
                </div>
            </div>
        </div>
</div>

我已经浏览了本论坛内外的一些主题。不幸的是，我无法让它们按照所需的标准工作。

标准是：

控件和标签应该是水平的。像这样

姓名：[文本框]   部门：[文本框]
ABCD : [文本区域]

但我得到了这个

姓名：[文本框]   部门：[文本框]
ABCD : [文本区域]

我很难将 ABCD 标签和 textarea 与上面的行对齐。

我是 bootstrap 和 html 5 的新手，需要帮助。

提前致谢。

更新 @vanburen - 抱歉回复晚了。你好，我试过你的解决方案。我想设计的表格是这样的，请查看答案下方的 jsfiddle（链接相同，但末尾有 /3）。我现在遇到这些问题： 1. 一些 div 与前一个下拉列表连续重叠，因此某些区域不可点击（这里 ii 使用了 html 选择、标签和输入文本，但实际上我使用的是 @Html.DropdownList、@Html.TextBoxFor、@Html .Label 和 @Html.TextAreaFor) 2. 文本区域和按钮再次出现问题，需要将文本区域拉伸到上述控件末尾的边缘，并且按钮与右侧文本区域的末尾对齐

我必须放置行 div，否则文本框或下拉菜单不可点击。

我还需要减少标签和控件之间的空间。我也在使用容器流体。

请帮忙。

Answer 1

您需要更改 HTML 结构。你不需要 col-lg-4 和 col-lg-10 并且你的 textarea 应该是 label > col-md-2, textarea > col-md-10 所以一切都正确排列.

另外，这个类 col-md-pull-1 在 Bootstrap 中不存在。

查看工作示例。

body {
  padding-top: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal">
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="name" class="col-md-4 control-label">Name:</label>
          <div class="col-md-8">
            <input type="text" class="form-control" id="name" placeholder="Name">
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <label for="department" class="col-md-4 control-label">Department:</label>
          <div class="col-md-8">
            <input type="text" class="form-control" id="department" placeholder="Department">
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <label for="ABCD" class="col-md-2  control-label">ABCD:</label>
          <div class="col-md-10">
            <textarea class="form-control" id="ABCD" name="textarea">default text</textarea>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 2

问题出在您的列类中。改成这样。同时删除col-md-pull-1

               <div class="col-sm-12 col-lg-10">
                    <div class="form-group">
                        <label for="inputPassword" class="col-md-2  control-label">ABCD:</label>
                        <div class="col-md-10">
                           <textarea class="form-control" id="textarea" name="textarea">default text</textarea>                        
                        </div>
                    </div>
                </div>