我希望根据表单的一部分显示表格。
这是我要找的:
#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帮助了解我的源代码的外观，以便您可以随心所欲地操纵它。
感谢任何帮助。
最佳答案
将 class="col-md-6"用于 form 和 table 它可以工作并且响应迅速。在整页中运行以下代码
/* CSS used here will be applied after bootstrap.css */
/*.right-table {
width: 50%;
margin-left: 70%
}*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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="col-md-6">
<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>
</div>
<div class="col-md-6">
<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>
</div></form>
<div id="push"></div>
关于html - 水平对齐表格旁边的表格部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39575857/