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

标签 html css forms twitter-bootstrap bootstrap-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>

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

最佳答案

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

关于html - Bootstrap 模态无法正确呈现表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39530848/

相关文章:

javascript - 在javascript中使用onClick获取被点击按钮的id

html - 在响应式设计方面,您如何处理高分辨率手机,例如 Galaxy S4?

javascript - 如何为图像制作响应式自动幻灯片?

html - 拨动开关前元件

forms - 轨道 4 : Set default field in form partial only if new form

html - 无法嵌入 YouTube 视频(Cookie 错误 : samesite attribute)

javascript - 是否可以在没有 PHP 的情况下创建上传文件脚本(并被服务器接受)

html - 如何在手机上使用图片元素获得清晰的图像

javascript - Jquery:在表单上提交验证然后允许默认操作继续

ruby-on-rails - 具有中间模型的 ActiveStorage 多次上传