Форма макета с Bootstrap

Question

Я пытаюсь макет формы с Bootstrap 3. Моя форма разбита на группы. Например, моя форма выглядит следующим образом:

[h4]Personal Info[/h4] 
First Name [text field ] 
Last Name [text field ] 
Birthday [date field ] 

[h4]Contact Info[/h4] 
Email Address [text field ] 
Phone Number [text field ] 

В попытке создать эту форму, у меня есть следующий код:

<h4>Personal Info</h4> 
<label class="col-sm-4 control-label" for="FirstName">First Name</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="firstName" name="FirstName" type="text" value=""> 
</div> 
<label class="col-sm-4 control-label" for="LastName">Last Name</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="lastName" name="LastName" type="text" value=""> 
</div> 
<label class="col-sm-4 control-label" for="Birthday">Birthday</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="Birthday" name="Birthday" type="text" value=""> 
</div> 

<h4>Contact Info</h4> 
<label class="col-sm-4 control-label" for="EmailAddress">Email Address</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="emailAddress" name="EmailAddress" type="text" value=""> 
</div> 

<label class="col-sm-4 control-label" for="PhoneNumber">Phone number</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="phoneNumber" name="PhoneNumber" type="text" value=""> 
</div> 

Когда я запускаю этот код, моя форма имеет несколько проблем: 1. Между группами нет прокладки или поля. 2. Этикетки не выровнены по левому краю. Кроме того, они вертикально выровнены относительно нижней части строки, а не вертикально центрированы с полем ввода.

К сожалению, я сосать CSS. Я думал, что Bootstrap поможет мне справиться с этими сценариями. Что я делаю не так?

Answer 1

вы должны использовать класс form-group и form для лучшего выравнивания в начальной загрузки компонентов формы и form-control класс

, как это

<div class="container"> 
<form class="form-horizontal"> 
<h4>Personal Info</h4> 
<div class="form-group"> 
<label class="col-sm-4 control-label" for="FirstName">First Name</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="firstName" name="FirstName" type="text" value=""> 
</div> 
    </div> 
<div class="form-group"> 
<label class="col-sm-4 control-label" for="LastName">Last Name</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="lastName" name="LastName" type="text" value=""> 
</div> 
    </div> 
    <div class="form-group"> 
<label class="col-sm-4 control-label" for="Birthday">Birthday</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="Birthday" name="Birthday" type="text" value=""> 
</div> 
    </div> 

<h4>Contact Info</h4> 
    <div class="form-group"> 
<label class="col-sm-4 control-label" for="EmailAddress">Email Address</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="emailAddress" name="EmailAddress" type="text" value=""> 
</div> 
    </div> 
<div class="form-group"> 
<label class="col-sm-4 control-label" for="PhoneNumber">Phone number</label> 
<div class="col-sm-8"> 
    <input class="form-control input-sm" id="phoneNumber" name="PhoneNumber" type="text" value=""> 
</div> 
    </div> 
</form> 
</div> 

Bootply DEMO

пожалуйста прочитайте bootstrap form documentation

Answer 2

Смотрите документацию на горизонтальных формах:

Bootstrap Horizontal Form Docs

Вам просто нужно настроить разметку.

Это должно быть вдоль этих линий:

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
</form> 

Edited, чтобы добавить Demo Fiddle