Question

我试图使用Bootswatch的Paper Bootstrap主题以最小的努力向我的网页引入类似材料的效果（目前我正在使用Bootstrap 3）。但是，我遇到了许多奇怪的效果 - 即使在简单的概念验证网站上也是如此。消息来源如下：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/3/paper/bootstrap.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>

<body>

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

    <div class="modal fade" tabindex="-1" id="modalError">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Error</h4>
                </div>
                <div class="modal-body">
                    <p>Error text</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

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

</html>

效果如下所示：

将鼠标悬停在＆＃34; X＆＃34;按钮：

将鼠标悬停在关闭按钮上：

最奇怪的是，我无法使用开发人员工具调试黑框。看起来它根本不存在，但它正在显示。

任何人都可以确认这些效果吗？我使用的是Chrome 61.0.3163.100。可能是什么原因？如何调试这些效果？

Bootswatch - 奇怪的效果

0 个答案: