Форма Проектирования Использование Twitter Bootstrap для колонного типа Input

Question

Я хочу разработать форму что-то вроде этого:

Я прошел через документацию Twitter Bootstrap и обнаружил, что нет правильного способа сделать это если вы не делаете некоторые хаки CSS для достижения этого. Я не хочу делать CSS-хаки, потому что они делают страницу невосприимчивой.

Есть ли подходящий способ для достижения этой цели?

Я придумал следующий код для моей формы:

<form class="form-horizontal"> 
<fieldset> 
    <div class="control-group"> 
     <label class="input-mini" for="first">Start</label> 
     <label class="input-mini" for="first">End</label> 
     <label class="input-mini" for="first">Share</label> 
    </div> 
    <div class="control-group form-inline"> 
     <input type="text" class="input-mini"> 
     <input type="text" class="input-mini"> 
     <input type="text" class="input-mini"> 
    </div> 
</fieldset> 

Я также создал jsfiddle. Существует две проблемы с предоставленной выше формой:

1. Этикетки не являются горизонтальными.
2. Неправильное пространство между текстовым вводом.

Answer 1

Да, вы можете достичь этого макета с помощью сетки.

Что-то, как это должно сделать работу:

<div class="container"> 

    <div class="row"> 
    <div class="span1"> 
     One 
    </div> 
    <div class="span1"> 
     Two 
    </div> 
    <div class="span1"> 
     Three 
    </div> 
    </div> 

    <div class="row"> 
    <div class="span1"> 
     <input type="text" class="input-mini"> 
    </div> 
    <div class="span1"> 
     <input type="text" class="input-mini"> 
    </div> 
    <div class="span1"> 
     <input type="text" class="input-mini"> 
    </div> 
    </div> 

    <div class="row"> 
    <!-- Same as above --> 
    </div> 

    <div class="row"> 
    <!-- Same as above --> 
    </div> 
</div> 

Смотрите демо здесь: http://bootply.com/60908