Html 将按钮与带有标签的输入表单对齐

我试图将一个按钮元素与另外两个带标签的输入元素对齐。使用下面的引导代码段：

<div class="row centered-form center-block ">
  <div class="container col-md-6 col-md-offset-3">
    <form action="/result" class="form-inline" method="get" role="form">
      <div class="row">
         <div class="form-group col-md-6">
           <label class="control-label" for="County">Prop1, Prop2</label>
           <input class="form-control" name="County"  type="text" />
         </div>
         <div class="form-group col-md-4">
           <label class="control-label" for="Type">Type of Election</label>
             <select class="form-control" name="Type"><option value=""></option>
                <option value="1">President</option>
             </select>
         </div>
        <button class="btn btn-primary col-md-2" type="submit">Submit</button>
     </div>
   </form>    
  </div>
</div>

建议一，建议二
选举类型
主席:
提交

我得到的图像如下所示：

如果我从两个输入中删除标签，我会得到：

如何在表单输入上保留标签，并且仍然将其与按钮对齐

---

我相信按钮类不是这样工作的

更新：这是愚蠢的，但它的工作。如果它有效，不要弄乱它

<div class="form-group col-md-2">
    <label class="control-label" for="btn"></label>
    <button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button>
</div>

提交

使用

align self-end

类（引导4/flexbox）将按钮与列底部垂直对齐，而不是使用不正确的标签

<div class="form-group col-md-2 align-self-end">
  <button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button>
</div>

提交

您能提供一个完整的工作示例吗？我测试了代码，看起来还可以。我添加了一个提琴，可能是@Dekel的副本。与我在IDE中的代码完全相同，但在Fiddle中的结果不同。首先，您需要为输入提供100%的宽度，因为它与列重叠；第二个，您不必设置空标签，只需将

padding top

或

margin top

添加到按钮，就不会修复它。检查小提琴。@hello我更新了代码snipet。向按钮添加一个空标签会使它精确地显示在应该显示的位置。确切地说，这不是最佳实践，但它是有效的@尤里：这只是针对这个具体案例的一个解决方案，而不是一般的解决方案。也许你可以试着调整到div或smth的底部。这是最好的答案。对我有用。我尝试过的另一种方法似乎很有效，就是将style=“margin top:auto”应用于托管按钮的div。如果在字段下方写入验证消息，则该方法无效