如何將輸入（帶標籤）與同一行上的按鈕對齊？

試圖通過將所有元素內聯來製作一個易於使用的搜索表單。它看起來像標籤推下輸入大約14px左右，但沒有什麼可以做同樣的搜索按鈕。關於如何在同一條線上獲得一切的任何想法？如何將輸入（帶標籤）與同一行上的按鈕對齊？

Screenshot

<div class="row"> 
    <div class="col-md-2"> 
     <label>Date: </label> 
     <input type="date" name="startdate" class="form-control"/> 
    </div> 
    <div class="col-md-2"> 
     <label>Optional Search String: </label> 
     <input type="text" class="form-control"/> 
    </div> 
    <div class="col-md-2"> 
     <button type="button" class="btn btn-primary">Search</button> 
    </div> 
</div>

來源

2014-02-07 sean

你並不需要把所有的招數引導已經具備了這樣的場景是form-inline類。你可以在你的需求中使用它。我已經根據這個修改了你的課程。

<div class="form-inline"> 
    <div class="form-group"> 
     <label>Date: </label> 
     <input type="date" name="startdate" class="form-control"/> 
    </div> 
    <div class="form-group"> 
     <label>Optional Search String: </label> 
     <input type="text" class="form-control"/> 
    </div> 
    <div class="form-group" style="vertical-align:bottom"> 
     <button type="button" class="btn btn-primary">Search</button> 
    </div> 
</div>

我只是用vertical-align:bottom與去年form-group，因爲你必須在最後一組，而不是在他們休息有兩個中只有一個元素。

Demo

來源

2014-02-07 18:18:08 Sachin

這使標籤字段的左側。我不認爲這是原始問題的正確解決方案。 –

我不相信有任何引導類是具體的，但它很容易做自己，在按鈕上使用margin-top: 14px

來源

2014-02-07 18:06:17 helion3

一個技巧就是前添加一個隱藏label您button：

<label class="hiddenLabel">This is hidden label</label> 
<button type="button" class="btn btn-primary">Search</button>

那麼你可以申請visibility: hidden;這個隱藏實驗室埃爾。

Bootply Demo

來源

2014-02-07 18:11:41 Felix

   <div class="row"> 
        <div class="col-md-2"> 
         <label>Date: </label> 
         <input type="date" name="startdate" class="form-control"/> 
        </div> 
        <div class="col-md-2"> 
         <label>Optional Search String: </label> 
         <input type="text" class="form-control"/> 
        </div> 
        <div class="col-md-2"> 
         <button type="button" class="btn btn-primary" style="margin-top: 28px"> 
          Search 
         </button> 
        </div> 
       </div>

來源

2014-02-07 18:13:40

如何將輸入（帶標籤）與同一行上的按鈕對齊？

回答

相關問題