Multiple form-groups on single row in Bootstrap 4

Question

Does anyone know if this kind of thing is possible?

I've tried using inline-group and form-inline but then it doesn't seem to conform to fit the full grid width.

Whereas form-horizontal seems to expect the entire form on one row.

This code creates the desired output (two form controls on one row) but form-groups are required around each one for viewing in sm mode.

NB: This is for a 16 col grid.

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

I don't think this is a duplicate of: Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

...because this isn't leaving me with full control of grid columns within via form labels etc.

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 的行为与 grid rows 相同。因此，可以为您的表单应用嵌套列模板：

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