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>

更新：我发表的声明似乎有些混乱。所以我更新了一张图片，以显示我希望我的显示器 The illustration

Answer 1

如果你正在使用bootstrap，那么你的表单元素应该有一个用于固定宽度容器的类container或container-fluid或用于col-sm-6类的灵活容器。见codepen。请阅读this了解详情。

Answer 2

您需要将每个组件放入其自己的col div中。这样它始终保持相同的宽度。 See this 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>

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

2 个答案: