Question

由于标签文本长度的不同，两个输入未对齐。以下是我的代码的一部分：

<div class="row">
    <div class="col-auto col-md-6 form-group">
         <label for="category">Which of the following best describes you?</label>
         <select class="form-control" id="category" name="category">
             <option>Furniture Designer</option>
             <option>Architect</option>
         </select>
    </div>

    <div class="col-auto col-md-6 form-group">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

</div>

我如何轻松地解决未对齐问题并保持表格具有恢复性？

Answer 1

以这种方式尝试

<div class="col-auto d-md-flex flex-md-column col-md-6 form-group">
        <label class="flex-md-fill" for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

https://jsfiddle.net/lalji1051/t41Lnuxh/5/

Answer 2

引导程序4中的默认行为是标签将出现在输入上方。（当然是上面的代码）。

如果您希望标签位于输入的旁边，请直接从bs4文档中尝试以下操作：

    <form>
       <div class="form-group row">
          <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
             <input type="password" class="form-control" id="inputPassword">
          </div>
       </div>
    </form>

Bootstrap 4 docs

Answer 3

您可以制作List<Value> valuelist = new List<Value>(); List<Value> valuelist1 = new List<Value>(); List<List<Value>> values = new List<List<Value>>(); Value value = new Value(); value.Type = true; value.ComboItems= CFGObjects; value.SelectedItem = "CFG01"; value.Text = "Sample"; Value value1 = new Value(); value1.Type = false; value1.ComboItems = CFGObjects; value1.SelectedItem = "CFG02"; value1.Text = "Sample1"; Value value2 = new Value(); value2.Type = false; value2.ComboItems = CFGObjects; value2.SelectedItem = "CFG02"; value2.Text = "Sample2"; valuelist.Add(value); valuelist.Add(value1); valuelist.Add(value2); valuelist1.Add(value1); valuelist1.Add(value1); valuelist1.Add(value1); values.Add(valuelist); values.Add(valuelist1); DataTableGrid.ItemsSource= values;的{{1}}，然后在表单输入中使用form-group强制底部对齐...

d-flex flex-column

https://codeply.com/p/S9wKwrKLch

或者，在标签上使用mt-auto类以防止文本换行：

<div class="row">
    <div class="col-auto col-md-6 form-group d-flex flex-column">
        <label for="category">Which of the following best describes you?</label>
        <select class="form-control mt-auto" id="category" name="category">
            <option>Furniture Designer</option>
            <option>Architect</option>
        </select>
    </div>
    <div class="col-auto col-md-6 form-group d-flex flex-column">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
    </div>
</div>

https://codeply.com/p/S9wKwrKLch

Answer 4

如果您想用一小段代码来处理它，希望这一行对您有所帮助：

您可以在输入中使用相等的底距，例如，如果您想使用 bootstrap ，则可以在输入中添加 mb-2 类。 / p>

或者甚至可以使用 mt-auto 进行输入。

如何在Bootsrap行中并排对齐两个输入？

4 个答案: