Pertanyaan Bentuk bootstrap sebaris dengan label di atas input


Bagaimana saya bisa bergerak ke bawah tombol pencarian pada tingkat yang sama dengan textfields lainnya?

enter image description here

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

4
2018-06-02 14:19


asal


Jawaban:


Cara mudah untuk memperbaikinya adalah dengan menambahkan struktur yang sama dengan kolom input lainnya (juga hindari menambahkan CSS tambahan yang mungkin tidak mencakup semua kasus), untuk label, gunakan &nbsp; sebagai placeholder.

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


6
2018-06-02 14:24



Cara sederhana lainnya adalah menambahkan tinggi label sebagai margin.

Pastikan Anda masuk ke tampilan halaman penuh dari potongan untuk melihat hasil yang tepat:

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


1
2018-06-02 14:27