Question

有谁知道这种事情是否可能？

我尝试过使用inline-group和form-inline但是它似乎不符合整个网格宽度。

而form-horizontal似乎期望整行表格在一行。

此代码创建所需的输出（一行上有两个表单控件），但每个表单周围都需要表单组才能在sm模式下查看。

注意：这是针对16 col网格的。

Define and throw a dedicated exception instead of using a generic one.

我不认为这是重复的： Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

...因为这并没有让我完全控制通过表单标签等中的网格列。

Answer 1

将表单组放入.col-*容器中，以便在水平布局中对齐组，例如：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form>
  <div class="col-xs-6 form-group">
    <label for="inputEmail3" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
  <div class="col-xs-6 form-group">
    <label for="inputPassword3" class="control-label">Password</label>
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</form>

＆＃13;

如果表单组的控件也应在水平布局中对齐，请对表单使用.form-horizontal类。在这种情况下，.form-group的行为与网格row相同。因此，可以为您的表单应用Nesting columns模板：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form class="form-horizontal">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="inputEmail3" class="col-xs-3 control-label">Email</label>
      <div class="col-xs-9">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="inputPassword3" class="col-xs-4 control-label">Password</label>
      <div class="col-xs-8"><input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
  </div>
</form>

＆＃13;

Answer 2

我的不好，我还没有正确理解嵌套行：

https://v4-alpha.getbootstrap.com/layout/grid/#nesting

这很好用：

<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group row">
                <label class="col-form-label col-md-4" for="formGroupExampleInput">First Name*</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="form-group row">
                <label class="offset-md-2 col-form-label col-md-4" for="formGroupExampleInput">Last Name*</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
                </div>
              </div>
        </div>
    </div>
</form>

Bootstrap 4中单行的多个表单组

2 个答案: