Question

这是一个非常简单的问题。我已经看到了导航栏的示例，并且我想做类似https://getbootstrap.com/docs/4.1/examples/pricing/的操作。

我复制代码时

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Enterprise</a>
    <a class="p-2 text-dark" href="#">Support</a>
    <a class="p-2 text-dark" href="#">Pricing</a>
  </nav>
  <a class="btn btn-outline-primary" href="#">Sign up</a>
</div>

到我的_layout.cshtml文件中获取

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    <environment names="Development">
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>

</head>
<body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
        <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
        <nav class="my-2 my-md-0 mr-md-3">
            <a class="p-2 text-dark" href="#">Features</a>
            <a class="p-2 text-dark" href="#">Enterprise</a>
            <a class="p-2 text-dark" href="#">Support</a>
            <a class="p-2 text-dark" href="#">Pricing</a>
        </nav>
        <a class="btn btn-outline-primary" href="#">Sign up</a>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @RenderSection("scripts", required: false)
</body>
</html>

这与示例不同。为什么？

Answer 1

您使用的Bootstrap版本错误！

具体来说，您为导航栏复制的代码来自Bootstrap的第4版（https://getbootstrap.com/docs/4.1/examples/pricing/，请注意网址中的 4.1 ），但是您要调用的库仅适用于版本3.3.6。这些版本不兼容，您需要选择其中一个。

至少看起来是这样，我不确定您要开发的“ css”捆绑包中是什么，但是对于阶段和生产，您要调用https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css，请再次注意 3.3.6

ASP.NET引导程序导航栏样式

1 个答案: