Bootstrap 5 行内表单居中问题：输入框列宽失效求助

问题描述 #

需要实现一行内联表单，包含占5列的输入框和自适应宽度按钮。未添加居中样式时，输入框正常占据5列；但为父div添加d-flex justify-content-center align-items-center h-100类实现水平垂直居中后，输入框不再按5列比例显示，表单宽度也不再铺满容器。

初始正常代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body>
  <div class=""> <!-- 无居中样式 -->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!-- 输入框正常占据5列 -->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

添加居中样式后失效的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary"> <!-- 居中样式 -->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!-- 输入框不再按5列显示 -->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

原因分析 #

Bootstrap的row和col布局依赖父元素宽度计算比例。当父容器设为d-flex后，子元素form默认会收缩以包裹内部内容，导致row宽度仅为内容宽度，col-5的比例计算失去有效基准，无法正常显示5列宽度。

另外，垂直居中需要html和body高度为100%，否则h-100类无法让容器占满视口高度，垂直居中效果不生效。

解决方法 #

方法1：给表单设置宽度类 #

给form添加Bootstrap宽度类（如w-100、w-75、max-w-md等），让表单拥有明确宽度，row和col就能基于该宽度正常计算比例。同时给html和body添加h-100确保垂直居中生效：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body class="h-100"> <!-- 添加h-100 -->
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary">
    <form class="bg-dark w-75"> <!-- 添加w-75设置表单宽度为75% -->
      <div class="row">
        <div class="col-5">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

• w-100：表单占满整个容器宽度，和初始状态一致，同时保持垂直居中
• w-75：表单占容器75%宽度，在页面居中显示
• max-w-md：表单最大宽度为中等屏幕尺寸，适配响应式布局

方法2：使用Bootstrap网格系统嵌套 #

在flex容器内添加container或container-fluid，利用网格系统的宽度基准保证表单布局正常：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body class="h-100">
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary">
    <div class="container"> <!-- 添加container作为宽度基准 -->
      <form class="bg-dark">
        <div class="row">
          <div class="col-5">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
          </div>
          <div class="col">
            <button type="submit" class="btn btn-primary">Sign in</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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