Twitter bootstrap 带3个输入的引导v4表单+；同一行上的按钮

我想在同一行创建包含3个输入字段+按钮的表单，但我不知道如何创建它。
我使用BootstrapV4设计表单

这是我的破设计图：

我的代码

<div class="col-sm-7 mx-auto bg-faded">
  <form class="form-inline" action="index.html" method="post">
    <div class="form-group">
      <label class="mr-2" for="">First Name</label>
      <input type="text" name="" value="">
    </div>
    <div class="form-group">
      <label class="mr-2 ml-2" for="">Last Name</label>
      <input type="text" name="" value="">
    </div>
    <div class="form-group">
      <label class="mr-2 ml-2" for="">Nickname</label>
      <input type="text" name="" value="">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

名字
姓
昵称
提交

表单的宽度受其容器的限制，因此需要包装。如果要强制其不包裹，请使用

d-flex-flex nowrap

flexbox utils：

     <form class="form-inline d-flex flex-nowrap" action="index.html" method="post">
             <div class="form-group">
                    <label class="mr-2" for="">First Name</label>
                    <input type="text" name="" value="">
              </div>
              <div class="form-group">
                    <label class="mr-2 ml-2" for="">Last Name</label>
                    <input type="text" name="" value="">
              </div>
              <div class="form-group">
                    <label class="mr-2 ml-2" for="">Nickname</label>
                    <input type="text" name="" value="">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
     </form>

名字
姓
昵称
提交

演示：