如何将引导内联表单置于网页中心

Posted 2023-03-05

【中文标题】如何将引导内联表单置于网页中心

【英文标题】：How to get the bootstrap inline form to center of the web page

【发布时间】：2021-10-23 17:13:37

【问题描述】：

当我让我的表单与下面的代码段居中对齐时，输入框和按钮将不会出现在同一行中。我需要让它们内联。我不明白为什么。请帮助任何代码示例。非常感谢您的帮助

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;

输出图像

当我将表单置于中心时，请帮助我将输入框和按钮置于同一行（内联）

【问题讨论】：

工作正常jsfiddle.net/lalji1051/vw7951mq

你的意思是把所有的东西都对齐在同一行或同一列并居中？

@SIMiosIS- 先生，我需要将我的完整表格放入行中，然后我需要将该表格放入网页的中心。

【参考方案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>

【讨论】：

@JackY 如果你想学习 flex 及其属性，请查看这个链接，他们已经很好地解释了它css-tricks.com/snippets/css/a-guide-to-flexbox