引导表单间距已关闭

Question

我正在使用引导表单元素，我想将所有表单元素居中。我尝试将 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="you@example.com">
           </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;
}

}

Answer 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

Answer 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="you@example.com">
               </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>

Answer 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="you@example.com">
    </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>