两个输入框使用一个标签，输入框未正确对齐

Question

我想从wordpress中的7开始设计这样的联系人图像。我已经尝试过，但是无法理解我的错误。

我的代码：

<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

看这个小提琴， 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>