Question

这是一个奇怪的...

我有类似这样的可折叠控件：

<button class="btn btn-primary" data-toggle="collapse" data-target="#meals">Meals</button>
<div id="meals" class="collapse">...</div>

我有这样的模式对话框：

<a href="#" data-toggle="modal" data-target="#editModal20190401" class="crud-edit"><span class="glyphicon glyphicon-pencil"></span></a>
<div id="editModal20190401" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

两者都可以在调试版本中正常工作。但是它们都在实时服务器上发布的版本中的每个实例（以及似乎每个浏览器）都失败。对于可折叠控件，您可以看到它们展开或折叠（例如，动画效果很好），但是一旦完全展开，它就会突然消失，就像display：none一样。对于模式对话框，它们之所以存在是因为它们阻止了页面其余部分的输入（我可以使用Inspect来验证元素实际上是否应该在其中），但是它们始终是不可见的。

我尝试禁用所有浏览器扩展，使用干净的无扩展名浏览器，清除cookie，一切。但是由于所有这些功能都应该是内置功能，并且确实可以在调试中工作，所以我什至不知道从哪里开始调试此功能。向正确方向的推动将不胜感激。

我正在使用带有Bootstrap 4-1的ASP.NET Core 2.1。

编辑： 这是模态对话框问题的单元测试链接：https://lisa3dev.slamgmt.com/TestPopup

同样，该页面在本地开发版本中正常运行。

Answer 1

伙计，那个网站很乱。我设法通过VPN来访问它。

这添加了多个版本的Bootstrap CSS和JS。我想请您解决所有这些冲突。

但是，如果不能这样做，或者想要在修复其余部分时进行临时修复。

您可以向模态中添加show类

<div id="editModal20190401" class="modal fade show" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

注意：这是针对您的方案的解决方法。但是，我强烈建议，您应解决所有这些冲突并转移到特定版本的Bootstrap。

更新：添加此样式表以升级到bootstrap 4：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

还要添加所有这些脚本：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

确保没有添加其他任何bootstrap或jquery或popper版本

Bootstrap模态弹出窗口和可折叠列表无法在生产中出现

1 个答案: