Question

我一直试图在.net c＃中使用bootstrap中的设计，但没有运气。当我在括号（我用来编写HTML的程序）中运行它而没有任何剃刀它完美地工作，但当我在Visual Studio中运行时，我看起来各种奇怪。我认为这与Bootstrap css没有被正确调用有关。但我不确定。这里的任何人都知道这有什么问题吗？提前致谢！！代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lekker Lokaal</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
    <nav class="navbar fixed-top navbar-expand-md navbar-light rood">
        <a class="navbar-brand" rel="home" href="#" title="lekker lokaal">
            <img style="max-width:150px; margin-top: -7px;" src="images/LogoWit.png">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>



        <div class="collapse navbar-collapse w-100 flex-md-column" id="navbarCollapse">
            <form class="form-group-lg">
                <div class="input-group">
                    <input type="text" class="form-control border-dark input-lg" placeholder="Search">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search" style="color:white"></i></button>
                    </div>
                </div>
            </form>

            <ul class="navbar-nav mr-auto mb-2 mb-md-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categorieën</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-white" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gelegenheden</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                <li class="nav-item">
                    <a class="nav-link py-1 text-white" href="#">Aanbiedingen</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 text-white" href="#">Over Ons</a>
                </li>
                <li class="nav-item"><i class="fa fa-shopping-cart" style="color:white"></i></li>
            </ul>
        </div>
    </nav>
    <i class="fa fa-shopping-cart" style="color:white"></i>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer class="py-5 rood">
            <div class="container">
                <p class="m-0 text-center text-white">Copyright &copy; Lekker Lokaal 2018</p>
            </div>
            <!-- /.container -->
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

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

How it looks in Brackets and is supposed to look How it looks like is visual studio

.net c中的bootstrap样式问题＃

0 个答案: