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

Posted 2021-04-07

我正在尝试将按钮元素与其他两个带标签的输入元素对齐。使用下面的bootstrap片段：

<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>

我得到的图像看起来像这样：

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

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

JSFiddle

答案

使用align-self-end类（bootstrap 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>

另一答案

我相信按钮类不会那样工作。

更新：这是愚蠢但它的工作原理。如果它有效，请不要乱用它！

<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>