2017-09-19 59 views
-1

大家好,我正在面對引導網格系統中的問題,同時添加兩個輸入標籤在同一行中,我不知道我的代碼中有什麼錯誤bt我試過其他解決方案,這是在stackoverflow bt它沒有爲我工作plz讓我知道我要去哪裏錯了,在此先感謝。 這裏是我的代碼:如何寫標籤在同一行的引導兩個輸入

<form class="form-horizontal label-values" role="form" name="form"> 
     <div class="row"> 
     <div class="col-xm-2 col-sm-2 col-md-2"> 
      <label class="control-label" for="noticePeriod">Notice Period In Days :</label> 
     </div> 
     <div class="col-xm-4 col-sm-4 col-md-4"> 
      <input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required=""> 
     </div> 
     <div class="col-xm-2 col-sm-2 col-md-2"> 
      <label class="control-label" for="ctc">CCTC In Lakhs :</label> 
     </div> 
     <div class="col-xm-4 col-sm-4 col-md-4"> 
      <input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="ctc" placeholder="CCTC" autocomplete="off" required=""> 
     </div> 
     </div> 
     <div class="row"> 
      <div class="col-xm-2 col-sm-2 col-md-2"> 
      <label class="control-label" for="ectc">ECTC In Lakhs :</label> 
      </div> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
      <input type="number" min="0" decimal-places="" ng-model="candidate.ectc" class="form-control ng-pristine ng-valid-min ng-invalid ng-invalid-required ng-touched ng-untouched" id="ectc" placeholder="ECTC" autocomplete="off" required=""> 
      </div> 
      <div class="col-xm-2 col-sm-2 col-md-2"> 
      <label class="control-label" for="communication">Communication :</label> 
      </div> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
       <select class="selectpicker form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" ng-model="candidate.communication" name="communication" id="communication" required=""> 
           <option value="" disabled="" selected="">Communication</option> 
           <option value="Good">Good</option> 
           <option value="Average">Average</option> 
           <option value="Poor">Poor</option> 
       </select> 
      </div> 
     </div> 
      <div class="col-xs-12"> 
      <div class="form-group"> 
       <div class="col-xs-offset-3 col-xs-7 buttonSize"> 
       <button type="submit" ng-click="AddCandidateDetails()" ng-disabled="form.$invalid" class="button-size submit-button-position btn btn-primary ng-isolate-scope" disabled="disabled" confirm="Are you sure you want to Submit Details?" confirm-title="confirmation" confirm-ok="Yes" confirm-cancel="No">Submit 
        </button> 
       </div> 
      </div> 
      </div> 
     </form> 

這裏是我的電流輸出什麼我得到: enter image description here

什麼,我期待:

enter image description here

如果有人知道我可以achive這plz告訴我怎麼能做到這一點。 你可以給我演示http://jsfiddle.net

+0

能否請你改變'COL-XM-4 COL-SM-4',而不是'COL-XM-2 COL-SM-2 '? –

+0

如果我這樣做然後它會溢出的gride列bcoz在單行我們可以只添加12列,如果我加入4 4 4 4它的16 –

回答

0

你應該這樣寫。

<form class="form-horizontal label-values" role="form" name="form"> 
    <div class="container-fluid"> 
    <div class=row> 

     -----container on left---- 
     <div class=col-md-6> 
      <div class="row"> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
       <label class="control-label" for="noticePeriod">Notice Period In Days :</label> 
      </div> 
      <div class="col-xm-8 col-sm-8 col-md-8"> 
       <input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required=""> 
      </div> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
       <label class="control-label" for="ctc">CCTC In Lakhs :</label> 
      </div> 
      <div class="col-xm-8 col-sm-8 col-md-8"> 
       <input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="ctc" placeholder="CCTC" autocomplete="off" required=""> 
      </div> 
     </div> 
     </div> 

     -----container on right---- 
     <div class=col-md-6> 
      <div class="row"> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
       <label class="control-label" for="noticePeriod">Notice Period In Days :</label> 
      </div> 
      <div class="col-xm-8 col-sm-8 col-md-8"> 
       <input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required=""> 
      </div> 
      <div class="col-xm-4 col-sm-4 col-md-4"> 
       <label class="control-label" for="ctc">CCTC In Lakhs :</label> 
      </div> 
      <div class="col-xm-8 col-sm-8 col-md-8"> 
       <input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" id="ctc" placeholder="CCTC" autocomplete="off" required=""> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</form> 

看到這個example

+0

同樣的問題,這不是我所期待的 –

0
<div class="row"> 
<div class="col-md-12"> 
    <div class="col-md-6"> 
     <div class="col-md-12"> 
      <div class="col-md-6"> 
       <label class="control-label" for="noticePeriod">Notice 
        Period In Days :</label> 
       </div> 
       <div class="col-md-6"> 
        <input type="number" min="0" ng- 
        model="candidate.noticePeriod" class="form-control ng-pristine ng- 
        untouched ng-valid-min ng-invalid ng-invalid-required" 
        id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" 
        required=""> 
       </div> 
      </div> 
      <div class="col-md-12 m-t-md"> 
       <div class="col-md-6"> 
        <label class="control-label" for="ectc">ECTC In Lakhs :</label> 
       </div> 
       <div class="col-md-6"> 
        <input type="number" min="0" decimal-places="" ng- 
        model="candidate.ectc" class="form-control ng-pristine ng-valid-min 
        ng-invalid ng-invalid-required ng-touched ng-untouched" id="ectc" 
        placeholder="ECTC" autocomplete="off" required=""> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="col-md-12"> 
       <div class="col-md-6"> 
        <label class="control-label" for="ctc">CCTC In Lakhs :</label> 
       </div> 
       <div class="col-md-6"> 
        <input type="number" min="0" decimal-places="" ng- 
        model="candidate.ctc" class="form-control ng-pristine ng-untouched ng- 
        valid-min ng-invalid ng-invalid-required" id="ctc" placeholder="CCTC" 
        autocomplete="off" required=""> 
       </div> 
      </div> 
      <div class="col-md-12 m-t-md"> 
       <div class="col-md-6"> 
        <label class="control-label" for="communication">Communication : 
        </label> 
       </div> 
       <div class="col-md-6"> 
        <select class="selectpicker form-control ng-pristine ng-untouched ng- 
        invalid ng-invalid-required" ng-model="candidate.communication" 
        name="communication" id="communication" required=""> 
        <option value="" disabled="" selected="">Communication</option> 
        <option value="Good">Good</option> 
        <option value="Average">Average</option> 
        <option value="Poor">Poor</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-md-12 m-t-md"> 
    <div class="text-center"> 
     <button type="submit" ng-click="AddCandidateDetails()" ng- 
     disabled="form.$invalid" class="button-size submit-button-position btn 
     btn-primary ng-isolate-scope" disabled="disabled" confirm="Are you sure 
     you want to Submit Details?" confirm-title="confirmation" confirm- 
     ok="Yes" confirm-cancel="No">Submit 
    </button> 
</div> 

相關問題