帶有標籤上方輸入的內聯自舉窗體

Question

如何向下移動與其他文本框相同級別的搜索按鈕？

<form> 
     <div class="col-md-3 form-group"> 
     <label for="search">Title</label> 
     <input type="text" name="search" id="search" class="form-control" /> 
     </div> 
     <div class="col-md-2 form-group"> 
     <label for="created_at_gt">Created at from</label> 
     <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" /> 
     </div> 
     <div class="col-md-2 form-group"> 
     <label for="created_at_lt">To</label> 
     <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" /> 
     </div> 
     <div class="row align-center"> 
     <input type="submit" value="search" class="btn btn-primary" /> 
     </div> 
    </form> 

Answer 1

一種簡單的方法來解決是添加相同的結構，其他輸入字段（也避免增加額外的CSS這可能不是涵蓋所有的情況下），對於標籤，使用 作爲佔位符。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view --> 
 

 

 
<form> 
 
    <div class="col-md-3 form-group"> 
 
    <label for="search">Title</label> 
 
    <input type="text" name="search" id="search" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-2 form-group"> 
 
    <label for="created_at_gt">Created at from</label> 
 
    <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-2 form-group"> 
 
    <label for="created_at_lt">To</label> 
 
    <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-1 form-group align-center"> 
 
    <label for="created_at_lt">&nbsp;</label> 
 
    <input type="submit" value="search" class="btn btn-primary form-control" /> 
 
    </div> 
 
</form>

Answer 2

另一種簡單的方法是添加標籤的高度爲裕量。

確保你進入片段的全頁視圖以查看正確的結果：

.lowered { 
 
    margin-top: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view --> 
 

 

 
<form> 
 
    <div class="col-md-3 form-group"> 
 
    <label for="search">Title</label> 
 
    <input type="text" name="search" id="search" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-2 form-group"> 
 
    <label for="created_at_gt">Created at from</label> 
 
    <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-2 form-group"> 
 
    <label for="created_at_lt">To</label> 
 
    <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" /> 
 
    </div> 
 
    <div class="col-md-2 form-group align-center"> 
 
    <input type="submit" value="search" class="btn btn-primary form-control lowered" /> 
 
    </div> 
 
</form>