Bootstrap模式不能正確渲染表單元素

我有一個引導模式，我試圖顯示一個form.But所有這些表單元素都沒有正確渲染。這裏是modal-Bootstrap模式不能正確渲染表單元素

<div id="mypartymodal" class="modal fade" role="dialog"> 
    <div class="modal-dialog" style="width:1000px;"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> New Party Entry</h4> 
     </div> 
     <div class="modal-body"> 
     <form class="form-horizontal partyform" id="partyform"> 
      <div class="form-group"> 
     <label class="control-label col-xs-2">Party name:</label> 
    <div class="col-xs-4"> 
     <input type="text" class="form-control " id="party_name" name="party_name" > 
     </div> 
      </div> 

      <div class="form-group"> 

    <label class="control-label col-xs-2">Opening bal:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="op_bal" name="op_bal" placeholder="Op.bal"> 
     </div> 
     <label class="control-label col-xs-2">Vat:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="vat" name="vat" placeholder="Vat no."> 
     </div> 
    </div> 

    <div class="form-group"> 

    <label class="control-label col-xs-2">Cst:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="cst" name="cst" placeholder="Cst no."> 
     </div> 
     <label class="control-label col-xs-2">Pan:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="pan" name="pan" placeholder="Pan no."> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="control-label col-xs-2">Service Tax no.:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="ser" name="ser" placeholder="Service Tax no."> 
     </div> 
     <label class="control-label col-xs-2">Address:</label> 
     <div class="col-xs-4"> 
     <textarea class="form-control" id="address" name="address" placeholder="Enter address"></textarea> 
     </div> 

    </div> 

    <div class="form-group"> 

    <label class="control-label col-xs-2">Email-id:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="email" name="email" placeholder="Enter email-id"> 
     </div> 
     <label class="control-label col-xs-2">Mobile:</label> 
     <div class="col-xs-4"> 
     <input type="text" class="form-control" id="mob" name="mob" placeholder="Enter contact number"> 
     </div> 
    </div> 

     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-info" id="saveparty" name="saveparty">save</button> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
    </div>

代碼，我知道我應該已經創造了這樣的問題小提琴，但嚴重的是我試過，但它不工作，所以我要求它這樣。請讓我知道我將如何獲得所有我的表單元素以模態和緊湊的方式正確呈現。在此先感謝。

來源

2016-09-16 payal_suthar

請在jfiddle中分享您的代碼。 – JeetDaloneboy

我試過，但它不工作... –

你面臨什麼問題？ – JeetDaloneboy

您需要在引導js文件鏈接之前添加jquery鏈接。如下所示。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-09-17 05:13:41 JeetDaloneboy

Bootstrap模式不能正確渲染表單元素

回答

相關問題