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

Posted 2023-03-21

【中文标题】Flex 项目与标签而不是与输入框对齐

【英文标题】：Flex item aligns with label instead of with an input box

【发布时间】：2022-01-10 14:20:44

【问题描述】：

我有这样的事情

<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 顶部放置标签？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

你可以在 select 上使用 margin-top

【参考方案1】：

您可以将align-items-end 添加到弹性容器（第一个示例）。

如果您希望它们正确排列，您还需要将选择元素设为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>

【参考方案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>

我认为您正在使用引导程序，所以我不知道引导程序是否会干扰我的代码，但还是试试吧。

【讨论】：

OP 特别不想添加您添加的标签。

我认为没有隐藏标签会太复杂。我会尝试和研究更多，给你一个更好的答案。