Html 垂直对齐两列输入字段，一个带标签，另一个不带标签

我正在申请发票。现在我在一行中创建了五列。每列都有输入字段。第四列和第五列有四个输入字段，但第五列字段没有标签。现在我需要的是使用无需任何自定义CSS的引导类来对齐四列和第五列。因为我不需要第五列的标签。花了几个小时后，我不知道如何对齐这两列

Html:

使用
mt-2
来
形成组
，其中
标签
为空

在此了解有关引导-4间距的信息：



领域
领域
领域
领域
使用
mt-2
到
表单组
，其中
标签
为空

在此了解有关引导-4间距的信息：



领域
领域
领域
领域
首先，我不知道如何使用
col-sm-3
在一行中创建5列。这将在一行中只生成4列，第五列将被推送到新行

如果第4列和第5列都有4个输入，但只有第5列输入没有标签。为什么不将第4列和第5列合并为一列，并使用行作为其输入

<div class="container">
  <div class="row">
    <div class="col-sm-2 offset-sm-1">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label>Field 1</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 1 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 2 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 3 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 4 without label" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


领域
领域
领域
字段1
字段2
字段2
字段2


Fiddle:
首先，我不知道如何使用
col-sm-3
在一行中创建5列。这将在一行中只生成4列，第五列将被推送到新行

如果第4列和第5列都有4个输入，但只有第5列输入没有标签。为什么不将第4列和第5列合并为一列，并使用行作为其输入

<div class="container">
  <div class="row">
    <div class="col-sm-2 offset-sm-1">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-2">
      <div class="form-group">
        <label>Field</label>
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label>Field 1</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 1 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 2 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 3 without label" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label>Field 2</label>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="input 4 without label" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


领域
领域
领域
字段1
字段2
字段2
字段2


FIDLE:
请告诉我更多帮助。关于答案，如果我添加更多字段，则您的第五列和第四列未对齐。我的意思是第四列和第五列输入字段不应位于第1列到第3列之下。仅举个例子，您可以删除它。。。。如果你把答案标记为“答案”并向上看，你的答案并不完全有帮助，但是tnx对你的努力有帮助。我只是想知道你的答案告诉我更多的帮助关于答案，如果我多放一些字段，你的第五列和第四列没有对齐。我的意思是第四列和第五列输入字段不应该在第1列到第3列下。仅举个例子，你可以删除它。。。。如果你把答案标记为“答案”并向上看，你的答案并不完全有帮助，但是tnx对你的努力有帮助。我刚刚提到你的答案第4和第5个输入字段不应该在第1到第3列。什么？我不明白你的意思。为了简单起见，我复制了每个列的字段标签和输入。这只是输入字段的一个占位符。这正是我要找的。为了学习的目的，我要再看一遍。还有一个问题请回答。我需要在第一行字段下放置一个按钮，该按钮应该创建第一行字段。我应该如何做？@stackOverFlowGeek：您可以使用
来解决此问题，但在较小的屏幕上，列将变成自己的行。我不明白。你说第五栏没有标签。但是你现在需要那个标签吗？第4和第5个输入字段不应该在第1到第3列下面。什么？我不明白你的意思。为了简单起见，我复制了每个列的字段标签和输入。这只是输入字段的一个占位符。这正是我要找的。为了学习的目的，我要再看一遍。还有一个问题请回答。我需要在字段的第一行下放置一个按钮，该按钮应该创建字段的第一行。我应该如何操作？@stackOverFlowGeek: