html - Bootstrap 模态无法正确呈现表单元素

Question

我有一个 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>

我知道我应该为这样的问题创建一个 fiddle ，但我认真地尝试过但它不起作用，所以我这样问。请让我知道如何以紧凑的方式在模态上正确呈现所有表单元素。提前致谢。

Answer 1

你需要在bootstrap 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>