引导表单间距已关闭

Posted 2023-03-05

【中文标题】引导表单间距已关闭

【英文标题】：Bootstrap form spacing is off

【发布时间】：2019-05-23 09:10:18

【问题描述】：

我正在使用引导表单元素，我想将所有表单元素居中。我尝试将 margin: 0 auto !important 添加到表单控件类，但填充/边距仍然存在问题。输入字段的左右填充/边距仍然不均匀。另外，文本区域和按钮被固定在左侧。牢记响应式设计，解决此问题的最佳方法是什么？

html：

   <form class="form">
        <h4 class="form-contactme">Contact Me</h4>
        <div class="form-row">
           <div class="form-group col-sm-6">
              <label for="firstName" class="form-inputlabel">First Name</label>
              <input type="text" class="form-control" id="firstName" placeholder="First Name">
           </div>
           <div class="form-group col-sm-6">
              <label for="lastName" class="form-inputlabel">Last Name</label>
              <input type="text" class="form-control" id="lastName" placeholder="Last Name">
           </div>
        </div>
        <div class="form-row">
           <div class="form-group col-sm-6">
              <label for="email" class="form-inputlabel">Email</label>
              <input type="email" class="form-control" id="email" placeholder="[e-mail]">
           </div>
           <div class="form-group col-sm-6">
              <label for="phone" class="form-inputlabel">Phone</label>
              <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
           </div>
        <div class="form-row">
           <div class="form-group">
              <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
              <textarea type="text" class="form-control" id="messageBox"></textarea>
           </div>
        </div>
        <div class="form-row">
              <button type="submit" class="btn btn-primary">Submit</button>
        </div>
  </form>

文字：

.form
padding:3% !important;
background-color:#9fd199;
margin-bottom:5%;
&-contactme
    font-size:1.8rem;
    font-weight:900;
    text-align:center;
    margin-bottom:15%;

&-row
    width:100%;

&-inputlabel
    display:none;

&-control
    margin-left:0 auto !important;

【参考方案1】：

这是因为表单类的默认填充和边距。

您必须删除默认的填充和边距才能使元素居中并在同一行中对齐。

在你的css中添加以下行

.form-group, .form-row > .col, .form-row > [class*="col-"] 
  padding-left:0; 
  padding-right:0;

.form-row
  margin:0;

一个有效的 codepen 链接：https://codepen.io/Ev1tw1n/pen/xmdjeL

【讨论】：

谢谢！我忘记了 bootstrap .row 和 .col 类有预设的填充和边距

乐意随时为您提供帮助:)

如何回答您的问题？它不会将文本区域和提交按钮居中...

【参考方案2】：

你错过了一个结束的 div。现在检查

<form class="form">
            <h4 class="form-contactme">Contact Me</h4>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="firstName" class="form-inputlabel">First Name</label>
                  <input type="text" class="form-control" id="firstName" placeholder="First Name">
               </div>
               <div class="form-group col-sm-6">
                  <label for="lastName" class="form-inputlabel">Last Name</label>
                  <input type="text" class="form-control" id="lastName" placeholder="Last Name">
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="email" class="form-inputlabel">Email</label>
                  <input type="email" class="form-control" id="email" placeholder="[e-mail]">
               </div>
               <div class="form-group col-sm-6">
                  <label for="phone" class="form-inputlabel">Phone</label>
                  <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
               </div>
            </div> 
            <div class="form-row">
               <div class="form-group">
                  <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
                  <textarea type="text" class="form-control" id="messageBox"></textarea>
               </div>
            </div>
            <div class="form-row">
                  <button type="submit" class="btn btn-primary">Submit</button>
            </div>
      </form>

【参考方案3】：

将 display flex 添加到容器中，然后您可以使用 align-items: center 将所有项目对齐到中心

.form-group, .form-row 
  display: flex;
  flex-direction: column;
  align-items: center;

.form 
  padding: 3% !important;
  background-color: #9fd199;
  margin-bottom: 5%;


.form-group,
.form-row 
  display: flex;
  flex-direction: column;
  align-items: center;


.form-contactme 
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 15%;


.form-row 
  width: 100%;


.form-inputlabel 
  display: none;


.form-control 
  margin-left: 0 auto !important;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<form class="form">
  <h4 class="form-contactme">Contact Me</h4>
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="firstName" class="form-inputlabel">First Name</label>
      <input type="text" class="form-control" id="firstName" placeholder="First Name">
    </div>
    <div class="form-group col-sm-6">
      <label for="lastName" class="form-inputlabel">Last Name</label>
      <input type="text" class="form-control" id="lastName" placeholder="Last Name">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="email" class="form-inputlabel">Email</label>
      <input type="email" class="form-control" id="email" placeholder="[e-mail]">
    </div>
    <div class="form-group col-sm-6">
      <label for="phone" class="form-inputlabel">Phone</label>
      <input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
        <textarea type="text" class="form-control" id="messageBox"></textarea>
      </div>
    </div>
    <div class="form-row">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>