Question

我正在使用引导表单元素，我想将所有表单元素居中。我尝试过添加空白：对表单控件类来说是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>

Scss：

.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

您错过了期末股息。现在检查

<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

在容器中添加显示柔性，然后您可以使用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>

引导表格间距已关闭

3 个答案: