Inline-Bootstrap-Formular mit Beschriftungen über den Eingängen

Question

Wie kann ich die Suchschaltfläche auf derselben Ebene mit anderen Textfeldern verschieben?

<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

Eine einfache Möglichkeit zu beheben, ist dieselbe Struktur wie andere Eingabefelder hinzuzufügen (auch vermeiden zusätzliche CSS hinzufügen, die nicht alle Fälle abdecken kann), für das Label verwenden   als Platzhalter .

<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

Eine weitere einfache Möglichkeit, die Höhe des Etiketts als Rand hinzuzufügen wäre.

Stellen Sie sicher, blattgr Ansicht des Snippets gehen in die richtige Ergebnis zu sehen:

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