到處搜尋，我不能清楚地看到我是如何設計出具有以下設計的內嵌表格後：（使用自舉3類，而不是CSS自定義如果可能）Twitter的引導3在線表單與標籤
當用戶有寬屏幕：
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
當用戶有一個小屏幕：
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
有觀點認爲，最初的設計是把所有字段的鄰ne行，如果它不適合控件會跳到下一行，但將Label + Field保持在一起。
此外，如果有一種方式，每個標籤+輸入之間的間距大於標籤和其字段之間的間距。
最後，如果在跳轉到下一行時標籤+字段之間存在更多垂直邊距的方法。
可以使用的結構混合col-xs-12，col-sm-6並col-lg-3得到1,2或4列。裏面你form-group，記得要解決標籤/輸入尺寸的col-xs-4和col-xs-8：
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>
你仍然需要一些CSS：
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}
，只要你想你可以添加儘可能多的投入。
爲了能夠不在乎每行的字段數，你可以用這個結構：
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>
和幾條CSS線來修復邊距：
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
好吧我玩過網格系統，並且儘可能接近您的設置。
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
這隻有兩個字段。您可能需要更改col類以適合您的佈局。
我會提出完全不同的東西，包裝標籤和領域內嵌的div內：
<div style="display:inline-block">
Label:input
</div>
這樣，當他們即將分手，他們打破成對，標籤+輸入。
你可以試試下面
這裏 - http://www.bootply.com/117807
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
</div>
</div>
相同的工作作爲選項＃1從@zessx，但沒有覆蓋CSS。該標籤還將標籤向右對齊以增加標籤控件對之間的空間。類「媒體」有沒有創建自定義類添加頂部邊距，但通常情況下，最好有一個自定義類。
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>
最簡單的方法是把在COLS DIV標籤和文本輸入。希望這將節省時間對所有其他:)
<div class="col-md-3 text-right">
<label>City</label>
</div>
<div class="col-md-3 text-right">
<asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>
沒有辦法，所以我不必預見它將適合每行中的項目數量？此外，如果我嘗試使提交按鈕變小，它將與其餘字段無關 – VSP
對於提交按鈕：使col + offset + push等於12：'col-xs-8 col-xs-offset-4'，或者col -xs-4 col-xs-offset-8'等等。要獲得自動網格，請參閱我的編輯。 – zessx
你先生，是一個嚮導:)。第二種選擇正是我所期待的。需要注意的是，我發現'表單'類不存在於引導程序3中。現在我必須爲控件設置自定義CSS寬度，因爲col-xs類使用的寬度不在2º引導程序中工作。我將使用第二個示例進行一些更改：http://www.bootply.com/117291建議？ – VSP