如何使用Bootstrap实现H1文本与输入框的横向对齐？

你的代码里，<h1>是块级容器，且form-control类默认设置了display: block，导致输入框独占一行，最终呈现上下排列效果。完全可以用Bootstrap内置工具类解决，无需额外自定义CSS，以下是几种可行方案：

方案1：给父容器添加Flex布局类 #

直接给包含文本和输入框的容器加上Flex相关类，实现横向排列并对齐：

<div class="row mb-5">
    <div class="col h1 text-white d-flex align-items-center gap-3">
        Welcome
        <input class="form-control no-border font-size flex-grow-1" type="text" placeholder="Enter Name">
    </div>
</div>

• d-flex：将容器转为Flex布局，内部元素横向排列
• align-items-center：让文本与输入框垂直居中对齐
• gap-3：给两者之间添加间距（可根据需求调整数值）
• flex-grow-1：让输入框自动占满容器剩余空间（可选）

方案2：调整输入框的显示属性 #

用Bootstrap的行内块类修改输入框的显示方式，配合文本的行内设置：

<div class="row mb-5">
    <div class="col text-white">
        <h1 class="d-inline align-middle me-3">Welcome</h1>
        <input class="form-control no-border font-size d-inline-block align-middle" type="text" placeholder="Enter Name" style="width: auto;">
    </div>
</div>

• d-inline：让<h1>变为行内元素，不再独占一行
• d-inline-block：让输入框保持块级特性但不独占一行
• align-middle：确保文本与输入框垂直居中对齐
• me-3：给文本右侧添加间距（可选）
• 可通过width: auto或Bootstrap宽度类（如w-50）控制输入框宽度

方案3：拆分结构为独立栅格列（符合Bootstrap规范） #

把文本和输入框拆分为两个栅格列，用栅格系统实现横向布局：

<div class="row mb-5 align-items-center">
    <div class="col-auto h1 text-white">Welcome</div>
    <div class="col">
        <input class="form-control no-border font-size" type="text" placeholder="Enter Name">
    </div>
</div>

• col-auto：让文本列自动适配内容宽度
• col：让输入框列占满剩余空间
• align-items-center：让整行元素垂直居中

注意：如果no-border和font-size是自定义类，需确保它们不会干扰布局逻辑。

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