水平对齐表格旁边的表格部分

时间：2016-09-19 14:39:16

标签： html css twitter-bootstrap

我希望显示一个符合表格部分的表格。

以下是我要找的内容：

#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来帮助我的源代码看起来像什么，所以你可以根据需要操作它。

感谢任何帮助。

3 个答案:

答案 0 :(得分：1)

使用class="col-md-6＆＃34;对于表单和表，它可以正常工作，也可以响应。完整页面下面的代码

＆＃13;
＆＃13; 
/* CSS used here will be applied after bootstrap.css */

/*.right-table {
  width: 50%;
  margin-left: 70%
}*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需使用bootstrap的网格系统。

试试http://www.bootply.com/L9ycrlsopr

答案 2 :(得分：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

相关问题
最新问题