Flex项目与标签对齐，而不是与输入框对齐

Question

我有这样的

<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>

我拥有的select与ID标签对齐，而不是与输入对齐。有没有什么方法可以让它和输入对齐，而不必在select上加标签？

Answer 1

您可以将align-items-end添加到flex容器中(第一个示例(。

如果您希望它们正确排列，您还需要制作select元素form-control-sm(第二个示例(。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
<hr />
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control form-control-sm" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>

Answer 2

我已经编辑了您的代码，我认为这是一个很好的解决方案：

<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<div class="d-flex flex-column">
<label style="color: transparent;">ID</label>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
</div>

我认为你正在使用引导程序，所以我不知道引导程序是否会干扰我的代码，但无论如何都要尝试一下。