如何在 Bootstrap 行内并排对齐两个输入？答案

【问题标题】：How to align two inputs side by side inside a Bootsrap row?如何在 Bootstrap 行内并排对齐两个输入？
【发布时间】：2020-07-18 10:12:49
【问题描述】：

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

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

如何轻松修复错位并保持表单响应？

【问题讨论】：

标签： html forms input bootstrap-4 alignment

【解决方案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/

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

您可以将form-group 设为d-flex flex-column，然后在表单输入中使用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

或者，使用标签上的text-truncate 类来防止文本换行：

<label for="category" class="text-truncate">
   Which of the following best describes you?
</label>

https://codeply.com/p/S9wKwrKLch

【讨论】：

【解决方案4】：

如果你想用一小段代码来处理它，我希望这个对你有用：

您可以对两个输入使用相等的边距底部，如果您喜欢使用 bootstrap，例如，您可以在输入中添加 mb-2 类。

甚至您也可以在输入中使用 mt-auto。

【讨论】：