如何使标签和输入框与下一行对齐？

Question

我有以下代码，希望标签和输入框的下一行与输入框的第一行对齐。 我该如何实现？ 我为每一行添加了class =“ col-md-3 col-sm-6” ，但它不起作用。

<div style="width: 50%; margin: 20px auto; float:left">
    <form action="/view" method="POST" style="white-space: nowrap;">
        <div class="form-group form-inline">
            <label for="1" class="control-label">Ingot Order</label>
            <input type="text" id="1" class="form-control">
            <label for="2" class="control-label">Number</label>
            <input type="text" id="2" name="number" class="form-control">         
        </div>

        <div class="form-group form-inline">
            <label for="3" class="control-label">Date</label>
            <input type="text" id="3" class="form-control">

            <label for="4" class="control-label">Total Pcs</label>
            <input type="text" id="4" class="form-control">
        </div>

更新：似乎我所做的陈述有些混乱。 所以我更新了一张照片，以显示我想要的显示内容 。

Answer 1

如果使用引导程序，则表单元素应具有用于固定宽度容器的类container ，或用于col-sm-6类的container-fluid或柔性容器。 看到这个codepen 。 阅读此以获得更多信息。

Answer 2

您需要将每个组件放入其自己的col div中。 这样可以使它们始终保持相同的宽度。 看到这个codepen

所以代替：

<label for="1" class="control-label">Ingot Order</label>
<input type="text" id="1" class="form-control">

你有：

  <div class="col-md-2">
    <label for="1" class="control-label">Ingot Order</label>
  </div>
  <div class="col-md-4">
    <input type="text" id="1" class="form-control">
  </div>