ラベルが入力以上のインラインブートストラップフォーム

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>