對齊帶有標籤的輸入表單的按鈕

我想將一個按鈕元素與兩個帶標籤的其他輸入元素對齊。用下面的引導片段：對齊帶有標籤的輸入表單的按鈕

<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

來源

2016-11-30 hello

您能提供一個完整的工作示例嗎？我測試代碼，它看起來沒問題。 – 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>

來源

2016-11-30 01:19:01

不能修復它。檢查小提琴。 – 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>

來源

2017-12-29 03:35:01 ybakos

對齊帶有標籤的輸入表單的按鈕

回答

相關問題