Почему группы форм имеют отрицательный запас в Bootstrap?

У меня есть этот очень простой код, используя Bootstrap 3:

<html>
  <body>
    <main class="container" role="main">
      <form class="simple_form form-horizontal">
         <div class="form-group text required campaign_url">
           <label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
           <textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
         </div>

и он выглядит следующим образом:

Обратите внимание, что метки и входы приклеиваются влево. Осмотрев эти элементы, я нашел это:

.form-horizontal .form-group {
  margin-left: -15px;
  margin-right: -15px;
}

Почему это? Я знаю, что это тривиально удалить, но это заставляет меня задаться вопросом, не так ли, как я использую Bootstrap. Как его использовать?

Ответ 1

Это происходит потому, что вы используете form-horizontal которая предназначена для использования в качестве строки вместе с col-* для макета. Из документации по начальной загрузке:

Используйте предопределенные классы сетки Bootstrap, чтобы выровнять метки и группы элементов управления формы в горизонтальном макете, добавив в форму .form-horizontal (который не обязательно должен быть <form>). Это меняет .form-groups на поведение строк сетки, поэтому нет необходимости в .row.

Поэтому, если вы просто удалите form-horizontal отрицательное поле исчезнет.

http://codeply.com/go/QQnqgfKv9v

Ответ 2

Я просто провожу некоторое время, чтобы понять эту отрицательную разницу. Оказывается, что обычно вы встраиваете горизонтальную форму в контейнер или контейнерную жидкость с полем в 15px, а группы форм используют -15px.

Настоящая проблема заключается в том, что вам не хватает <div class="col-..."> чтобы обернуть ярлык и элементы управления формой.

Они добавляют некоторые отступы влево + вправо, и это будет отображаться правильно.

Что-то вроде:

<html>
  <body>
    <main class="container" role="main">
      <form class="simple_form form-horizontal">
        <div class="form-group text required campaign_url">
          <div class="col-md-12">
            <label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
          </div>
          <div class="col-md-12">
            <textarea class="text required form-control col-md-12" name="campaign[url]" id="campaign_url"></textarea>
          </div>
        </div>