我希望显示一个符合表格部分的表格。
以下是我要找的内容：
#Form
Label: |TextBox|
Label: |TextBox|
Label: |TextBox|
Label: |TextBox|
--------------------------------------------------------------------
Label: |TextBox| |----------- Table -----------|
Label: |TextBox| |-------------------------------|
Label: |TextBox| |-------------------------------|
Label: |TextBox| |-------------------------------|
Label: |TextBox| |-------------------------------|
--------------------------------------------------------------------
Label: |TextBox|
Label: |TextBox|
Label: |TextBox|
Label: |TextBox|
#End of Form
我创建了一个Bootply来帮助我的源代码看起来像什么，所以你可以根据需要操作它。
感谢任何帮助。
HTML
<form>
<div class="form-horizontal">
<hr>
<input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="0">
<input data-val="true" data-val-number="The field OfficerID must be a number." data-val-required="The OfficerID field is required." id="OfficerID" name="OfficerID" type="hidden" value="2">
<div class="form-group">
<label class="control-label col-md-2" for="DateEntered">Date Entered:</label>
<div style="width:26.5%" class="col-md-10">
<div id="datetimepicker" class="input-group date">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Date Entered: must be a date." data-val-required="The Date Entered: field is required." id="DateEntered" name="DateEntered" type="datetime" value="09/19/2016">
<span class="field-validation-valid text-danger" data-valmsg-for="DateEntered" data-valmsg-replace="true"></span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label class="control-label col-md-2" for="WOption">Test</label>
<div class="col-md-6">
<div class="radio">
<input id="WTCheck" name="WOption" type="radio" value="Test 1">
<span class="field-validation-valid text-danger" data-valmsg-for="WOption" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="WOption">Test 2</label>
<div class="col-md-6">
<div class="radio">
<input id="BCheck" name="WOption" type="radio" value="Test 2">
<span class="field-validation-valid text-danger" data-valmsg-for="WOption" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div id="AWOption" class="form-group">
<hr>
<label class="control-label col-md-2" for="AWeight">AW:</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field AW: must be a number." id="AW" name="AW" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="AW" data-valmsg-replace="true"></span>
</div>
</div>
<div id="BFTSelect" class="form-group">
<hr>
<label class="control-label col-md-2" for="TestTypeID">Test Type:</label>
<div class="col-md-10">
<select class="form-control" id="TestTypeID" name="TestTypeID"> <option value="">-- Select Test --</option>
<option value="1">S Assessment</option>
<option value="2">US Assessment</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="TestTypeID" data-valmsg-replace="true"></span>
</div>
</div>
<div id="S-Area">
<hr>
<div id="S-Measure">
<div class="form-group">
<label class="control-label col-md-2" for="SCT">C/T:</label>
<div class="col-md-3">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field C/T: must be a number." id="SCT" name="SCT" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="SCT" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SAS">A/S:</label>
<div class="col-md-3">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field A/S: must be a number." id="SAS" name="SAS" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="SAS" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ST">T:</label>
<div class="col-md-3">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field T: must be a number." id="ST" name="ST" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="ST" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="STotal">Total:</label>
<div class="col-md-3">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Total: must be a number." id="STotal" name="STotal" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="STotal" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SPercentile">Percentile:</label>
<div class="col-md-3">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Percentile: must be a number." id="SPercentile" name="SPercentile" type="number" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="SPercentile" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div id="S-Limits-M" class="right-table">
<table class="table table-bordered">
<tbody><tr>
<td>20 - 29</td>
<td>18.60%</td>
</tr>
<tr>
<td>30-39</td>
<td>21.30%</td>
</tr>
<tr>
<td>40-49</td>
<td>23.40%</td>
</tr>
<tr>
<td>50-59</td>
<td>24.60%</td>
</tr>
</tbody></table>
</div>
</div>
答案 0 :(得分：0)
你可能应该使用Bootstrap的原生网格，但这实际上只是简单的标记。如果每个＆＃39;部分＆＃39;字段有一个类型的容器（div，fieldset等）只需浮动你的表：
input {
display:block;
}
table {
float: right;
}<form>
<fieldset>
<legend>Group 1</legend>
<input type="text" name="group1_field1"/>
<input type="text" name="group1_field2"/>
<input type="text" name="group1_field3"/>
</fieldset>
<fieldset>
<table>
<tr>
<td>table row 1<td>
</tr>
<tr>
<td>table row 2<td>
</tr>
<tr>
<td>table row 3<td>
</tr>
</table>
<legend>Group 2</legend>
<input type="text" name="group2_field1"/>
<input type="text" name="group2_field2"/>
<input type="text" name="group2_field3"/>
</fieldset>
<fieldset>
<legend>Group 3</legend>
<input type="text" name="group3_field1"/>
<input type="text" name="group3_field2"/>
<input type="text" name="group3_field3"/>
</fieldset>
答案 1 :(得分：0)
我能够在L J的帮助下完成这项工作。
在form内，我添加了另一个row，并将表单和表格中我希望在他们自己的div＆＃39; s中彼此相邻的部分分开
分离后，我给了他们自己的col-md-值，这个值非常有效。
作为我所做事的视觉效果：
<form>
<div class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-2">Test</label>
<div class="col-md-10">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Test</label>
<div class="col-md-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-md-6">
<table class="table table-bordered">
<caption class="text-center">Limits</caption>
<tr>
<td>20 - 29</td>
<td>22.70%</td>
</tr>
<tr>
<td>30-39</td>
<td>24.60%</td>
</tr>
<tr>
<td>40-49</td>
<td>27.60%</td>
</tr>
<tr>
<td>50-59</td>
<td>30.40%</td>
</tr>
</table>
</div>
</div>
</div>
</form>
以下是Bootply