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

【问题标题】：How can I modify a Bootstrap form so that some fields are aligned on the left side of the screen, while other fields are aligned on the right side?如何修改 Bootstrap 表单，使某些字段在屏幕左侧对齐，而其他字段在右侧对齐？
【发布时间】：2018-02-24 16:44:27
【问题描述】：

我想制作一个符合设计细节的表单，要求我将一些字段与视口的左侧对齐，而将其他字段与右侧对齐。这是我到目前为止所拥有的：

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

如您所见，此标记块构成了一个表单，其中字段相互堆叠。相反，我希望“客户”和“收单方”字段（包括标签）在同一行上相互交叉（标签内联）。请注意，此应用程序不需要考虑移动设计；这将是一项公司内部网类型的交易，员工只能通过台式计算机访问该应用程序。任何帮助是极大的赞赏。此外，还有更多字段要添加到此表单中。我只是想在深入研究之前得到一个想法。谢谢。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap forms

【解决方案1】：

我认为使用<div class="form-group"> 会起作用。喜欢：

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

    <label for="ipt_billTo">Bill To</label>
    <input class="form-control" type="text" id="ipt_billTo" />
</div>

也许添加一些引导程序？

 <div class="form-group">
    <div class="col-md-6">
        <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="col-md-6">
         <label for="ipt_billTo">Bill To</label>
         <input class="form-control" type="text" id="ipt_billTo" />
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用引导网格系统来对齐表单中的标签和字段。以下是示例表格。您可以参考here 获取一些示例。重要的是 row 和 col-md-* 类应用于引导网格系统的 div 以相应地对齐表单。

以全页视图查看以下示例以查看表单布局。希望这会有所帮助。

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

【讨论】：

感谢您的回答。出于好奇，您在哪个浏览器中进行了测试？它在 IE 11 中看起来很混乱。
我用的是Chrome浏览器。
啊。好的谢谢。不幸的是，我公司唯一允许使用的浏览器是 Internet Explorer，我非常讨厌它。碰巧，您是否在 IE 中测试过您的解决方案？
它在 IE 中工作。点击上面的Run code snippet按钮，然后点击Full page链接查看表格。
嗯...你是对的。出于某种原因，当我通过 Visual Studio 2015 运行它时，它看起来非常不同。也许我打开/关闭了某种设置，导致它搞砸了。我不确定是什么问题。

【解决方案3】：

.form-inline 需要输入的服装宽度，并且仅适用于视口中至少 768 像素宽的表单。

https://getbootstrap.com/docs/3.3/css/#forms

您还应该为元素添加 col 类以获得更好的结果。

【讨论】：