Bootstrap 样式突然停止工作

Question

我已经看过的问题：

twitter bootstrap drop down suddenly not working
Complete list of reasons why a css file might not be working

我的 Bootstrap 样式似乎突然停止应用，导致页面看起来像 this。我正在使用 ASP.NET MVC 5 生成的布局，因此顶部应该有一个导航栏，等等。忽略红色横幅，该按钮无论如何都不会显示在该页面上。

开发工具中没有任何异常——控制台、网络等看起来都很正常，没有错误。所有文件都已加载，更改它们的顺序不会改变任何内容。所有 .css 和 .js 文件都是从本地文件系统加载的。我什至恢复到昨天的提交，当时网站运行良好，但网站仍然显示不正确。

我试过将它关闭然后再打开，现在我没有主意了。

编辑：结果相同，无论浏览器如何。我在这里完全不知所措。

代码，根据要求：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Log in</title>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
        <link href="/Content/Site.css" rel="stylesheet"/>
        <link href="/Content/css/select2.css" rel="stylesheet"/>
        <link href="/Content/alertify.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>
        <script src="/Scripts/modernizr-2.8.3.js"></script>

        <script src="/Scripts/jquery-3.1.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
        <script src="/Scripts/respond.js"></script>
        <script src="/Scripts/alertify.js"></script>
        <script src="/Scripts/Custom/JavaScript/utility.js"></script>
        <script src="/Scripts/jquery.mask.js"></script>
        <script src="/Scripts/autosize.js"></script>
        <script src="/Scripts/Custom/register-modal.js"></script>

        <script>
            //<!-- Google Analytics -->
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'shh', 'none');

            ga('send', 'pageview');
            //<!-- End Google Analytics -->
        </script>

        <!-- FontAwesome -->
        <link href="/Content/FontAwesome/fontawesome-all.css" rel="stylesheet" />
    </head>
</html>

Answer 1

用这个

更改布局文件中的<nav>标签

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

Answer 2

tl;dr OP 从 Bootstrap 3 -> 4 更新而没有更新 HTML.

一周前，我通过 NuGet 更新到 Bootstrap v4(a?)，没有注意主要版本号的变化。显然我的缓存直到一周后才被清除（当我问这个问题时），所以我什至忘记了更新。

Bootstrap 4 是一次重大返工，所以我的 Bootstrap HTML 大部分都失效了。

还原 Bootstrap 可以解决所有问题。

Bootstrap 样式突然停止工作

Bootstrap styles suddenly stopped working

javascript

css

asp.net-mvc

twitter-bootstrap

twitter-bootstrap-4