Встроенная компоновка формы бутстрапа с надписями над входами

Я хотел бы создать форму со следующим макетом, используя Bootstrap 3:

enter image description here

У меня есть jsfiddle с попыткой: http://jsfiddle.net/quyB6/

И разметка, которую я пробовал:

<form>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</div>

Ответы

Ответ 1

Я думаю, что самым простым решением было бы добавить col-xs-4 в класс каждого div. Это позволит убедиться, что div будут встроены в пример jsfiddle. Кроме того, вы должны закрыть тег формы </form>.

<form>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
</form>

Ответ 2

Замените тег <label> <div>, и он будет идеально расположен вверху.

Ответ 3

Для бутстрапа v4 вы можете использовать d-flex flex-column:

<div class="form-group col-md-4">
    <div class="d-flex flex-column">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
</div>