引导样式突然停止工作

Question

Questions I've already looked at: 我已经看过的问题：
Bootstrap JavaScript not working Bootstrap JavaScript不起作用
twitter bootstrap drop down suddenly not working twitter bootstrap下拉菜单突然不起作用
Complete list of reasons why a css file might not be working css文件可能无法正常工作的原因的完整列表

My Bootstrap styles seem to have suddenly stopped being applied, resulting in pages that look something like this . 我的Bootstrap样式似乎突然停止应用，导致页面看起来像这样。 I'm using the layout generated by ASP.NET MVC 5, so there should be a navbar at the top, among other things. 我使用的是ASP.NET MVC 5生成的布局，因此除其他外，顶部应该有一个导航栏。 Ignore the red banner, the button doesn't show on that page anyway. 忽略红色横幅，该按钮无论如何都不会显示在该页面上。

Nothing looks amiss in the dev tools -- console, network, etc. all look normal with no errors. 在开发工具中，控制台，网络等都没有什么不妥。 All the files are loaded, and changing their order changes nothing. 所有文件均已加载，更改其顺序不会改变。 All of the .css and .js files are loaded from the local file system. 所有.css和.js文件都是从本地文件系统加载的。 I even reverted to a commit from yesterday, when the site was working fine, but the site still displays incorrectly. 我什至恢复了昨天的提交，当时该站点运行正常，但该站点仍显示不正确。

I've tried turning it off and on again, now I'm out of ideas. 我已经尝试过将其关闭然后再打开，但现在我已经失去了想法。

Edit: Same results, no matter the browser. 编辑：无论浏览器如何，结果都是一样的。 I'm at a total loss here. 我在这里全亏了。

Code, as requested: 要求的代码：

<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

change the <nav> tag in layout file with this 以此更改布局文件中的<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 updated from Bootstrap 3 -> 4 without updating HTML. tl; dr OP从Bootstrap 3-> 4更新而未更新HTML。

A week ago, I updated to Bootstrap v4(a?) via NuGet, without paying attention to the change in major version number. 一周前，我通过NuGet更新到Bootstrap v4（a？），而没有关注主要版本号的更改。 Apparently my cache didn't get cleared until a week later (when I asked this question), so I had forgotten the update even happened. 显然，直到一周后（当我问这个问题时），我的缓存才被清除，所以我甚至忘记了更新。

Bootstrap 4 is a major rework, so the bulk of my Bootstrap HTML became invalid. Bootstrap 4是一项重大的返工，因此我的Bootstrap HTML大部分都变得无效了。

Reverting Bootstrap fixes everything. 还原Bootstrap可以修复所有问题。

引导样式突然停止工作

问题描述

2 个解决方案

解决方案1
2 2018-02-03 05:31:44

解决方案2
0 已采纳 2018-02-07 02:21:33

引导样式突然停止工作

问题描述

2 个解决方案

解决方案1 2 2018-02-03 05:31:44

解决方案2 0 已采纳 2018-02-07 02:21:33

解决方案1
2 2018-02-03 05:31:44

解决方案2
0 已采纳 2018-02-07 02:21:33