我想制作一个符合设计规范的表单,这些设计规范要求我将一些字段对齐到视口(viewport)的左侧,而其他字段则对齐到右侧。这是我到目前为止所拥有的:
<form class="form-inline">
<div class="form-group">
<h2>Order Entry</h2>
<label for="ipt_authNum">Authorization Number</label>
<input class="form-control" type="text" id="ipt_authNum" />
</div>
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</form>
如您所见,这个标记 block 构成了一个表单,其中的字段相互堆叠。取而代之的是,我希望“客户”和“收单方”字段(包括标签)在同一行上彼此交叉(标签内联)。请注意,此应用程序不需要考虑移动设计;这将是公司内部网类型的交易,员工只能通过台式计算机访问该应用程序。任何帮助是极大的赞赏。此外,还有更多字段可以添加到此表单中。我只是想在我太深入之前得到一个想法。谢谢。
最佳答案
您可以使用 Bootstrap 网格系统来对齐表单中的标签和字段。以下是示例表格。可以引用here一些例子。重要的是 row
和 col-md-*
类应用于 bootstrap 网格系统的 div 以相应地对齐表单。
在完整页面 View 中查看以下示例以查看表单布局。希望这会有所帮助。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<h2>Order Entry</h2>
<div class="container">
<div class="row">
<div class="col-md-2"><label for="ipt_authNum">Authorization Number</label></div>
<div class="col-md-3"><input class="form-control" type="text" id="ipt_authNum" /></div>
<div class="col-md-7"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<label for="ipt_customer">Customer</label>
</div>
<div class="col-md-3">
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="row">
<div class="col-md-2"><label for="ipt_billTo">Bill To</label></div>
<div class="col-md-4"><input class="form-control" type="text" id="ipt_billTo" /></div>
</div>
</div>
</form>
关于html - 如何修改 Bootstrap 表单,使一些字段在屏幕左侧对齐,而其他字段在屏幕右侧对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46240443/