Question

包含<link rel="stylesheet" href="/static/css/datatables.min.css" />后我的模态淡入淡出类div元素停止正常工作。例如，让我们考虑一下W3学校的一个简单例子：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

除非您包含<link rel="stylesheet" href="/static/css/datatables.min.css" />，否则此代码正常工作。

以下是我在Django html模板中包含的Django项目链接列表：

<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>

<link rel="stylesheet" href="/static/css/bootstrap-theme.css"/>

<link rel="stylesheet" href="/static/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="/static/css/datatables.min.css" />
<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="/static/js/moment-with-locales.js"></script>
<script src="/static/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/static/js/date_time.js"></script>
<script type="text/javascript" src="/static/js/dataTables.bootstrap.js"</script>
<script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/js/global_vars.js"></script>
<script type="text/javascript" src="/static/js/general_content_manager.js"></script>

这是什么原因，有可能以某种方式解决这个问题吗？

Answer 1

原因是>>> filter( lambda (i, _): i > -1, [(''.join(w[j] for w in crosswords).find(word), j) for j in range(len(crosswords))]) [(1, 0), (1, 2)]。确保你了解CSS优先级，你需要注意很多优先级，比如引用文件优先级，内联优先级，同一文件优先级相同的文件多个样式等在您的情况下，它的参考文件优先级，如果您将CSS Priorities放在所有其他css文件之后（在自定义和引导文件之后），则此文件将优先。

读取或放置（从顶部读取）到DOM的最后一个文件优先于在同一元素上应用的其他css规则。

因此，尝试将您的引用移动到引导程序CSS和自定义CSS之上，它必须正常工作。如果我不清楚任何一点，请告诉我。

Answer 2

经过一番讨论后，我发现我在html文件中包含了 datatables.bootstrap.min.css 和 datatables.min.css ，导致CSS重叠造型。对于使用Bootstrap的用户，只包括datatables.bootstrap.min.css，不要包含datatables.min.css。这最终解决了问题

Bootstrap的“Modal fade”与JQuery数据表不兼容？

2 个答案: