[英]Different alignments for <label> and <input> inside form-group
[英]using form-group with label button is getting aligned to top
我正在使用引導程序 4。當我在下面的示例中使用表單組時。 對齊保存按鈕時出現問題。 它正在與頂部對齊。 因為我沒有同級別的標簽。
我嘗試使用此示例Bootstrap 表單內嵌上面的標簽,位置按鈕
但我仍然需要硬編碼 margin-top。 否則按鈕將與底部對齊。 無論如何,我可以使用沒有覆蓋的純引導程序來實現這一點嗎?
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group row">
<div class="col-md-4">
<input class="form-control" type="text" placeholder="Search by Unit" />
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-search"></i>Search</button>
</div>
</div>
</form>
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="zones">Zones</label>
<select class="form-control" id="zones">
<option>Zone1</option>
<option>Zone2</option>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="unitname">Unit Name</label>
<input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary"><i
class="fa fa-fw fa-save"></i>Save</button>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<table class="table table-stripped">
<thead>
<tr>
<th>#</th>
<th>Zone Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let zone of zones|async">
<td>{{zone.zoneId}}</td>
<td>{{zone.zoneName}}</td>
<td>{{zone.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
一種解決方案是將按鈕包裝在一個form-group
,然后將類d-flex
和align-items-end
到包含它的col-*
div。 例子:
<div class="col-md-3 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">
<i class="fa fa-fw fa-save"></i>Save
</button>
</div>
</div>
最小化示例:
請注意, border
和border-*
類只是為了幫助可視化布局。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <div class="container-fluid"> <form method="POST" enctype="multipart/form-data" class="form-horizontal"> <div class="form-group row"> <div class="col-md-4"> <input class="form-control" type="text" placeholder="Search by Unit"/> </div> <div class="col-md-4"> <button type="submit" class="btn btn-primary"> <i class="fa fa-fw fa-search"></i>Search </button> </div> </div> </form> <form method="POST" enctype="multipart/form-data" class="form-horizontal"> <div class="row"> <div class="col-md-4 border border-warning"> <div class="form-group"> <label for="zones">Zones</label> <select class="form-control" id="zones"> <option>Zone1</option> <option>Zone2</option> </select> </div> </div> <div class="col-md-5 border border-primary"> <div class="form-group"> <label for="unitname">Unit Name</label> <input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" /> </div> </div> <div class="col-md-3 d-flex align-items-end border border-danger"> <div class="form-group"> <button type="submit" class="btn btn-primary"> <i class="fa fa-fw fa-save"></i>Save </button> </div> </div> </div> </form> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.