html - 如何修改 Bootstrap 表单，使一些字段在屏幕左侧对齐，而其他字段在屏幕右侧对齐？

Question

我想制作一个符合设计规范的表单，这些设计规范要求我将一些字段对齐到视口(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 构成了一个表单，其中的字段相互堆叠。取而代之的是，我希望“客户”和“收单方”字段(包括标签)在同一行上彼此交叉(标签内联)。请注意，此应用程序不需要考虑移动设计；这将是公司内部网类型的交易，员工只能通过台式计算机访问该应用程序。任何帮助是极大的赞赏。此外，还有更多字段可以添加到此表单中。我只是想在我太深入之前得到一个想法。谢谢。

Answer 1

您可以使用 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">&nbsp;</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>