html - 使用带有标签按钮的表单组正在与顶部对齐
问题描述
我正在使用引导程序 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>
解决方案
One solution is to wrap the button inside a form-group
and then add classes d-flex
and align-items-end
to the col-*
div that contains it. Example:
<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>
Minimized Example:
Note that border
and border-*
classes are just to help visualize the layout.
<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>
推荐阅读
- c++ - 在 c++ 中使用向量的问题的解决方案在提交时显示,但在使用自定义输入运行相同的输入时运行良好
- elasticsearch - 用于弹性搜索的 Python API - 我们如何根据多个字段过滤搜索结果?
- python - 数据框列的数字很多是 str 格式,很多是浮点数,我如何将它们全部转换为浮点数
- html - 如何使宽度大于其容器的文本在 IE 11 中向左移动而不是向右移动?
- c# - X509Certificate2 无法解码 Xamarin.iOS 上的 .PFX 证书
- ansible - Ansible - 删除线
- sql - 使用 sql 窗口函数对过去 n 天的数量求和
- reactjs - 无法从 Web 浏览器安装 PWA
- javascript - router.js中的Vue js“未定义商店”
- angular - 我如何为这个角色服务创建一个模拟