Bootstrap 4中单行上的多个表单组

Question

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

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

而 form-horizo​​ntal 似乎希望整个表单都在一行中。

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

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

<form>
    <div className="form-group row">
        <!--form group needed here -->
        <label className="col-form-label col-md-2" htmlFor="formGroupExampleInput">First Name*</label>
        <div className="col-md-5">
          <input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
        </div>

        <!--form group needed here -->
        <label className="offset-md-2 col-form-label col-md-2" htmlFor="formGroupExampleInput">Last Name*</label>
        <div className="col-md-5">
          <input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
        </div>
    </div>
</form>

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

...因为这不会让我通过表单标签等完全控制网格列。

Answer 1

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

<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>

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

<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>

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>