テーブルの横に横に書式のセクションを整列します

Question

フォームのセクションに並んでテーブルを表示することを検討しています。ここで

は、私が探していますものです：

#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を作成しているので、あなたが好きなだけにそれを操作することができます。

何か助けていただければ幸いです。 フォームとテーブルため

Answer 1

使用class="col-md-6「それが動作しても、その応答。ただ、ブートストラップのグリッドシステムを使用して全ページにコードの下

/* 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> 
 
    

Answer 2

を実行します。

お試しくださいhttp://www.bootply.com/L9ycrlsopr

Answer 3

私は別のrowが含まれ、フォームのセクションとIが自分divで互いに隣接して表示するように望んでいたテーブルを分離form内部L J.

の助けを借りてこれを達成することができました'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