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

问题描述：

我想将一个按钮元素与两个带标签的其他输入元素对齐。用下面的引导片段：对齐带有标签的输入表单的按钮

<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

您能提供一个完整的工作示例吗？我测试代码，它看起来没问题。 – Dekel

[Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/不水平]可能的重复（http://stackoverflow.com/questions/31214255/bootstrap-align-input-with-label-to-button-without -label-vertical-form-not-h） – vanburen

@Dekel我加了一个小提琴。与IDE中的代码完全相同，但在Fiddle中有不同的结果。 – hello

答

相信按钮类不这样的。

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

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

不能修复它。检查小提琴。 – hello

@hello我更新了代码snipet。将一个空标签添加到该按钮会使其完全位于应该的位置。绝对不是最好的做法，但它的工作原理！ –

不能正常工作.... – Yuri

答

代替一个不正确的标签，使用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>

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

相关推荐