html - 两个输入框使用一个标签，输入框没有正确排列

Question

我想在 wordpress 的 7 contact 中设计这样的图像。我试过了，但无法理解我的错误。

我的代码:

<div class="row" style="margin:0;">
<div class="col-sm-6" style="padding:0;">

  <div class="col-sm-6">
    <div class="form-group">
<label for="name">Name:</label><span style="color:red;" class:col-sm-1>*</span>
      [text* your-name id:Name class:very-special-field-for-checkbox class:form-control placeholder "First Name"]
    </div>
  </div><!-- /.col -->
  <div class="col-sm-6">
    <div class="form-group">
<label ></label>
     [text* your-name id:Name class:form-control placeholder "Last Name"]
    </div>
  </div>
</div>
  </div>

Answer 1

看到这个 fiddle ， Bootstrap-4 行使用 flexbox 并且“flex-wrap”属性默认设置为“wrap”。 你让它成为“nowrap”。 https://jsfiddle.net/f2tkexrL/21/

.row {
  flex-wrap: nowrap;
}

.form-group {
  margin: 0;
}

<div class="row" style="margin:0;">
  <div class="col-sm-6" style="padding:0;">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="name">Name:</label><span style="color:red;" class:col-sm-1>*</span>
      </div>
    </div>
    <!-- /.col -->
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-3 form-group">
          <input type="text">
          <label>First Name</label>
        </div>
        <div class="col-sm-3 form-group">
          <input type="text">
          <label>Last Name</label>
        </div>
      </div>
    </div>
  </div>
</div>