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

Я использую элементы формы начальной загрузки и хочу центрировать все элементы формы посередине. Я пробовал добавить 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 = "[email protected]">
           </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;
}

}

html css sass responsive-design bootstrap-4

24.12.2018 06:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

932

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

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

Добавьте следующие строки в свой css

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

Ссылка на рабочий код: https://codepen.io/Ev1tw1n/pen/xmdjeL

Спасибо! Я забыл, что классы начальной загрузки .row и .col имеют предустановленные отступы и поля.

— 24.12.2018 07:34

Рад помочь вам в любое время :)

— 24.12.2018 07:38

Как это ответить на ваш вопрос? Он не центрирует текстовое поле и кнопку отправки ...

— 24.12.2018 07:51

24.12.2018 06:48

Вы пропустили закрывающий 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 = "[email protected]">
               </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>

24.12.2018 06:54

Добавьте в контейнер дисплейную гибкость, после чего вы сможете выровнять все элементы по центру с помощью 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 = "[email protected]">
    </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>

24.12.2018 07:10

Другие вопросы по теме

403 Ответ для изображений в относительном родительском пути встроенного CSS

Не может переопределить flask_bootstrap css

Есть ли способ предоставить раскрывающийся список без использования синтаксиса <button>?

Эффект цикла jQuery: scrollHorz не работает должным образом

Как получить информацию об элементе из компонентов во флексбоксе в Angular

Альтернативные варианты для Webpack styelint-webpack-plugin? Ищем поддерживаемый проект

Как обслуживать .JPG для браузера, который не поддерживает .webp должным образом?

Создание набора встроенных div, которые расширяют свою ширину, чтобы заполнить их родительский элемент, но которые также прерываются, чтобы сформировать новую строку, когда достигается их минимальная ширина

Как получить отзывчивую и аккуратно выровненную галерею изображений, когда изображения имеют разные размеры / соотношения?

CSS - Все: элементы события наведения должны иметь цвет текста #fff

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

Ответы 3

Другие вопросы по теме

Похожие вопросы