it-swarm.com.ru

Как выровнять входные данные в форме начальной загрузки с входными группами-аддонами?

У меня очень простая форма с Bootstrap 3, которую я могу легко (автоматически) выровнять, когда не использую input-group-addons. 

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

<form class="form-horizontal" role="form">

    <div class="form-group">
      <label for="product_name" class="col-sm-2 control-label">Product name</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="product_name" placeholder="Product name">
      </div>
    </div>

    <div class="form-group">
      <label for="product_price" class="col-sm-2 control-label">Price</label>
      <div class="col-sm-4 input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
        <span class="input-group-addon">.00</span>
      </div>
    </div>

    <div class="form-group">
      <label for="product_description" class="col-sm-2 control-label">Description</label>
      <div class="col-sm-6">
        <textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
</form>

JsFiddle: http://jsfiddle.net/Yzxy3/

25
Patryk

В документации по начальной загрузке для групп ввода сказано:

Не смешивайте группу ввода с другими компонентами. (см .: http://getbootstrap.com/components/#input-groups )

Не смешивайте группы форм или классы столбцов сетки напрямую с входными группами. Вместо этого вложите группу ввода в группу форм или элемент, связанный с сеткой. "

Таким образом, вы не можете смешивать «col-sm-4» с «input-group» в одном классе. Вы должны создать 2 класса div, первый с "col-sm-4", а другой с "input-group"

<div class="col-sm-4">
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
    <span class="input-group-addon">.00</span>
  </div>
</div>

Обновлено Fiddle

33
danivek

Это потому что .input-group имеет значение по умолчанию 

padding-right: 0;
padding-left: 0;

так что ваша div будет растянута на полную ширину, где .col-sm-4 имеет стили по умолчанию как:

padding-right: 15px;
padding-left: 15px;

Таким образом, чтобы заставить его работать как положено, вы можете добавить этот стиль:

.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

Обновлено Fiddle

17
Felix

Я считаю, что мне нужно было включить: float: left. Итак, CSS это:

.input-group[class*="col-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

Если нет, мои строки из нескольких столбцов сломались при обновлении с версии 3.0.2 до версии 3.0.3.

--cp

3
cplee70

.input-group [class * = "col-"] бесполезна, если вы используете

<fieldset>

Вот решение!

.makeHorizontal{  
float:left;
padding-left:20px;
}
0
ErcanE