設計窗體使用Twitter的引導列類型輸入

Question

我想設計一種形式是這樣的：

我通過Twitter的引導的文件去，發現有這樣做的不正確的方法除非你做一些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