如何将引导内联表单设置为网页的中心

Question

当我用下面的代码段对齐我的表单时，输入框和按钮将不会出现在同一行中。我要把他们插进去。我不明白为什么。请帮助处理任何代码示例。非常感谢你的帮助

index.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="form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      
      <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

style.css代码

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

}

输出图像

​

​

当我把表格放在中央时，请帮我把输入框和按钮放在同一行(内嵌)。

Answer 1

以便将输入框和按钮输入到同一行(内联)。

您可以在表单中使用display:flex，试试下面的代码

​

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

.formHolder  {
  display: flex;
  width: 100%;
  max-width: 270px;
}

.formHolder .form-control {
  flex: 0 0 calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.formHolder .btn { 
   flex: 0 0  80px;
   max-width:  80px;
}

<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="formHolder form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">      
         <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

​