Bootstrap图标与输入框垂直对齐及容器居中问题

问题原因 #

原代码用了Bootstrap的row和col栅格类，这类布局是为响应式分栏设计的，默认不会处理子元素的垂直对齐，同时col会让元素默认占满对应列宽，导致图标和输入框基线不对齐，出现图标偏上的情况。

方案一：调整Flex布局实现对齐与居中 #

保留外层居中容器，用d-flex代替row，并添加垂直对齐类：

<div class="container d-flex justify-content-center" id="baseContainer">
    <!-- 内层容器用d-flex+align-items-center实现垂直对齐 -->
    <div class="d-flex align-items-center">
        <input type="text" class="input-form" id="searchForm" placeholder="Busque um filme ou série">
        <!-- ms-2给图标加左侧间距，避免和输入框紧贴 -->
        <i class="fa-solid fa-magnifying-glass ms-2" onclick="foo()"></i>
    </div>
</div>

如果需要让内容在页面垂直方向也居中，给外层容器加上align-items-center和最小高度：

<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;" id="baseContainer">
    <div class="d-flex align-items-center">
        <input type="text" class="input-form" id="searchForm" placeholder="Busque um filme ou série">
        <i class="fa-solid fa-magnifying-glass ms-2" onclick="foo()"></i>
    </div>
</div>

方案二：用Bootstrap Input Group组件（推荐） #

Bootstrap自带的input-group组件专门用于输入框和附加元素的组合，自动处理对齐问题，更符合规范：

<div class="container d-flex justify-content-center" id="baseContainer">
    <div class="input-group" style="width: auto;">
        <input type="text" class="form-control" id="searchForm" placeholder="Busque um filme ou série">
        <!-- 把图标放在按钮里，提升点击交互体验 -->
        <button class="btn btn-outline-secondary" type="button" onclick="foo()">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
</div>

关键调整点 #

• 移除row和col类，改用d-flex布局控制元素排列
• 添加align-items-center实现子元素垂直居中对齐
• 用ms-2（margin-start）控制图标和输入框的间距

内容的提问来源于stack exchange，提问作者Artur