如何让Bootstrap行内表单在网页居中时输入框与按钮保持同一行

• 若使用Bootstrap 5及更高版本，原有的.form-inline类已被官方移除，无法实现行内布局效果
• 表单容器未显式设置弹性行布局，内部的input属于块级元素，默认独占整行

HTML代码 #

<section class="sec1 container-fluid mt-3 pd-5">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
  <form class="d-flex gap-2 mt-2 w-100" style="max-width: 500px;" action="/actionPage.php">
    <input type="email" class="form-control flex-grow-1" id="email" placeholder="Enter email">
    <button type="submit" class="btn btn-dark btn-sm">submit</button>
  </form>
</section>

CSS代码 #

.sec1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #faf8fb;
}

如果你不想使用Bootstrap内置工具类，也可以直接通过自定义CSS实现，额外添加如下样式即可：

.sec1 form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 500px;
}
.sec1 form input {
  flex: 1;
}

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