Designing Form Using Twitter Bootstrap for column type Input - forms

Question

I want to design a form something like this:
I went through the documentation of Twitter Bootstrap and found that there is no proper way of doing it unless you do some CSS hacks over to achieve that. I don't want to do any CSS hacks because they make the page unresponsive.
Is there any proper way for achieving this ?
I have come up with the following code for my form:
<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>
I have also created a jsfiddle. There are two problems with the above form being rendered:
Labels are not horizontal.
The space between text input is not proper.

Answer 1

Yes you can achieve that layout with the help of the grid.
Something like this should do the work:
<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>
See the demo here: http://bootply.com/60908