Bootstrap Modal 未以 div 形式启动答案

【问题标题】：Bootstrap Modal not launching in form divBootstrap Modal 未以 div 形式启动
【发布时间】：2014-05-21 01:15:09
【问题描述】：

奇怪的问题。当启动模态窗口的按钮位于表单 div 内时，模态窗口无法启动。铬说 “资源解释为脚本，但使用 MIME 类型 text/x-js 传输：” 我已经为源 js 输入了一个类型，但它没有帮助。我还将呼叫移至页面的较早位置，但没有用。真正奇怪的部分是，如果我将按钮移到表单 div 之外，则模式打开得很好，没有问题。有没有人经历过这个，可以指出我正确的方向。提前致谢

编辑：这是代码（我删掉了内容）

<div class="container">
<form class="form-inline" role="form">
  <div class="form-group">
    <label for="companyName">Company Name</label>
    <input type="text" class="form-control" id="companyName" placeholder="Company Name">
  </div>
  <div class="form-group">
    <label for="chainCode">Chain Code</label>
    <input type="text" class="form-control" id="chainCode" placeholder="Chain Code">
  </div>
  <div class="form-group">
    <label for="nCode">N-Code</label>
    <input type="text" class="form-control" id="nCode" placeholder="N-Code">
  </div>
  <button type="submit" class="btn btn-success">Search</button>
  <button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal"> Advanced
    <span class="glyphicon glyphicon-cog"></span>
  </button>
</form>

<!-- Advanced Modal -->
<div class="modal fade" id="advancedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Advanced Options</h4>
      </div>
      <div class="modal-body">
        <form role="form" id="myForm" method="post">
          <div class="form-group">
</form><!-- end advanced form -->
      </div><!-- end modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-   dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div><!-- end modal-footer -->
    </div><!-- end modal content -->
  </div><!-- end modal dialog large -->
</div><!-- end Advanced Modal -->
</div><!-- End Form Container -->

【问题讨论】：

你能粘贴你的代码吗？
从未见过。请给代码！
您在<form role="form" id="myForm" method="post"><div class="form-group"></div></form> 缺少</div>。不知道这是否是问题所在（我已将其添加到评论中）

标签： twitter-bootstrap-3

【解决方案1】：

在我看来，引导程序不知何故与表单中的button 混淆了。所以尝试使用

<a class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
    Advanced <span class="glyphicon glyphicon-cog"></span>
</a>

而不是

<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
    Advanced <span class="glyphicon glyphicon-cog"></span>
</button>

它应该可以工作，并且看起来一样。

【讨论】：