Щебетать бутстрап 3 формы - горизонтальные и множественные входные столбцы на одной линии
Мне нужно разместить несколько столбцов входов в одной строке следующим образом:
![What i need]()
Я сделал это, объединив несколько входов в одном form-group, но таким образом я не могу использовать класс has-error.
<div class="form-group">
<label class="control-label col-sm-4">Quarter</label>
<input type="text" class="col-sm-20" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Address</label>
<input type="text" class="col-sm-15" />
<label class="control-label col-sm-2">Addr. №</label>
<input type="text" class="col-sm-3" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Block name/Number</label>
<input type="text" class="col-sm-5" />
<label class="control-label col-sm-2">Entrance</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Floor</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Apartament</label>
<input type="text" class="col-sm-3" />
</div>
Итак, возможно ли иметь несколько form-group для каждого окна ввода?
Ответы
Ответ 1
Чтобы легко упорядочить вещи в бутстрапе 3, вы должны использовать Grid System.
Вот fiddle в соответствии с вашими потребностями:
<body>
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2">Quarter</label>
<div class="col-sm-10"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Address</label>
<div class="col-sm-5"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Addr. №</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Block name/Number</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Entrance</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Floor</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Apartament</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
</form>
</body>
Выравнивание зависит от ширины экрана, поэтому не забудьте правильно его настроить в соответствии с вашими потребностями. Затем вы можете сами вставлять входы.
Ответ 2
Вам нужно обернуть входы в свои собственные классы col-*, как это.
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Quarter</label>
<div class="col-md-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Address</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Addr. №</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Block name/Number</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Entrance</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Floor</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
<label class="control-label col-sm-1">Apartment</label>
<div class="col-md-1">
<input type="text" class="form-control">
</div>
</div>
</form>
Демо
Кроме того, нет col-sm-15 или col-sm-20 в Bootstrap
