Интервал формы начальной загрузки выключен

Question

Я использую элементы формы начальной загрузки и хочу центрировать все элементы формы по центру.Я попытался добавить margin: 0 auto! Важный для класса управления формой, но все еще есть проблемы с отступами / полями.Поля ввода по-прежнему имеют неравные отступы слева и справа / поля.Кроме того, текстовая область и кнопка застряли слева.Принимая во внимание адаптивный дизайн, каков наилучший способ решения этой проблемы?

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

Вы пропустили заключительный 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 2

Добавьте дисплей 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>

Answer 3

Это из-за отступов по умолчанию и полей классов формы.

Вы должны удалить отступы и поля по умолчанию, чтобы центрировать элементы и выровнять в одной строке.

Добавитьследующие строки в вас 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