Question

我已经看过的问题：
Bootstrap JavaScript not working
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更新 - ＆gt; 4没有更新HTML。

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

Bootstrap 4是一个主要的返工，因此我的Bootstrap HTML的大部分变得无效。

还原Bootstrap修复了所有问题。

Bootstrap样式突然停止工作

2 个答案: