Html 如何修改引导窗体，使某些字段在屏幕左侧对齐，而其他字段在屏幕右侧对齐？

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

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

正如您所看到的，这个标记块形成了一个表单，其中字段彼此堆叠在一起。相反，我希望包含的Customer和Bill-To字段标签在同一行上相互交叉，标签内联。请注意，此应用程序不需要考虑移动设计；这将是一项公司内部网类型的交易，员工只能通过台式计算机访问应用程序。非常感谢您的帮助。此外，还有许多字段要添加到此表单中。我只是想在做得太深之前有个想法。谢谢。

我想用一个就行了。比如：

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

---

您可以使用引导网格系统来对齐表单中的标签和字段。下面是表格样本。你可以参考一些例子。重要的是应用于DIV的row和col md-*类，用于引导网格系统，以相应地对齐表单

在完整页面视图中查看以下示例以查看表单布局。希望这有帮助

订单输入 授权号 顾客 1. 2. 帐单

---

.form inline需要输入的宽度，并且仅适用于视口中宽度至少为768px的窗体

---

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

谢谢您的回答。出于好奇，您在哪个浏览器中测试了此功能？它在IE 11中看起来很混乱。我用的是Chrome浏览器。啊。好的，谢谢。不幸的是，我公司唯一允许使用的浏览器是Internet Explorer，我非常讨厌它。顺便问一下，您是否在IE中测试过您的解决方案？它在IE中工作。单击上面的“运行代码片段”按钮，然后单击整个页面链接以查看表单。嗯。。。你说得对。由于某些原因，当我在Visual Studio 2015中运行它时，它看起来非常不同。也许我打开/关闭了某种设置，这导致它一团糟。我不确定是什么问题。