在布局到下一页有问题吗?

时间:2019-02-19 15:01:14

标签: c# .net

我使用_layout cshtml来获得所有相同的开始屏幕。它在索引页面上有效,但是当我转到下一个时,bootstrap的css丢失了。我添加了引导程序布局,但知道它不会在下一个屏幕上进行布局。如果您需要所有代码,我也可以将zip发送给您。索引false仅存在于没有任何内容的布局页面中,当您转到另一个页面时,您会获得布局的文本,而不是引导CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Project</title>

    <environment include="Development">
        <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
        <link href="css/jcarousel.css" rel="stylesheet" />
        <link href="css/flexslider.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
        <!-- Theme skin -->
        <link href="skins/default.css" rel="stylesheet" />
        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    </environment>
   
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="container ">
                <!-- end toggle link -->
                <div class="row nomargin">
                    <div class="span12">
                        <div class="headnav">
                            <ul>
                                <li><a asp-area="" asp-controller="Home" asp-action="Registreer"><i class="icon-user"></i>Registreer</a></li>
                                <li><a asp-area="" asp-controller="Home" asp-action="Login" data-toggle="modal">Inloggen</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="span2">
                        <div class="logo">
                            <a asp-area="" asp-controller="Home" asp-action="Index"><img src="img/logo_kraan.jpg" alt="" class="logo" /></a>
                        </div>
                    </div>
                    <div class="span10">
                        <div class="navbar navbar-static-top ">
                            <div class="navigation">
                                <nav>
                                    <ul class="nav topnav">
                                        <li class="">
                                            <a asp-area="" asp-controller="Home" asp-action="Index">Home</i></a>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="Statuten">Statuten</a>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="Bestuur">Raad van bestuur</a>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="Seminaries">Seminaries</a>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="ESCL">Over ESCL</a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#">Opdrachten <i class="icon-angle-down"></i></a>
                                            <ul class="dropdown-menu bold">
                                                <li><a asp-area="" asp-controller="Home" asp-action="OverheidsOpdrachten">OverheidsOpdrachten</a></li>
                                                <li><a asp-area="" asp-controller="Home" asp-action="PrivateOpdrachten">Private Opdrachten</a></li>

                                            </ul>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="Forum">forum</a>
                                        </li>
                                        <li>
                                            <a asp-area="" asp-controller="Home" asp-action="Contact">Contact </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            <!-- end navigation -->
                        </div>
                    </div>
                </div>

</div>
        </header>
    </div>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />

    </div>

    <environment include="Development">

        <script src="js/jquery.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/jcarousel/jquery.jcarousel.min.js"></script>
        <script src="js/jquery.fancybox.pack.js"></script>
        <script src="js/jquery.fancybox-media.js"></script>
        <script src="js/google-code-prettify/prettify.js"></script>
        <script src="js/portfolio/jquery.quicksand.js"></script>
        <script src="js/portfolio/setting.js"></script>
        <script src="js/jquery.flexslider.js"></script>
        <script src="js/jquery.nivo.slider.js"></script>
        <script src="js/modernizr.custom.js"></script>
        <script src="js/jquery.ba-cond.min.js"></script>
        <script src="js/jquery.slitslider.js"></script>
        <script src="js/animate.js"></script>

        <!-- Template Custom JavaScript File -->
        <script src="js/custom.js"></script>

    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </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>

<footer>
  <div class="container">
    <div class="row">
      <div class="span4">
        <div class="widget">
          <h5 class="widgetheading">Browse pages</h5>
          <ul class="link-list">
            <li><a href="#">About our company</a></li>
            <li><a href="#">Our services</a></li>
            <li><a href="#">Meet our team</a></li>
            <li><a href="#">Explore our portfolio</a></li>
            <li><a href="#">Get in touch with us</a></li>
          </ul>
        </div>
      </div>
      <div class="span4">
        <div class="widget">
          <h5 class="widgetheading">Important stuff</h5>
          <ul class="link-list">
            <li><a href="#">Press release</a></li>
            <li><a href="#">Terms and conditions</a></li>
            <li><a href="#">Privacy policy</a></li>
            <li><a href="#">Career center</a></li>
            <li><a href="#">Flattern forum</a></li>
          </ul>
        </div>
      </div>
     

      <div class="span4">
        <div class="widget">
          <h5 class="widgetheading">Get in touch with us</h5>
          <address>
            <strong>Flattern studio, Pte Ltd</strong><br>
            Springville center X264, Park Ave S.01<br>
            Semarang 16425 Indonesia
          </address>
          <p>
            <i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
            <i class="icon-envelope-alt"></i> email@domainname.com
          </p>
        </div>
      </div>
    </div>
  </div>
  <div id="sub-footer">
    <div class="container">
      <div class="row">
        <div class="span6">
          <div class="copyright">
            <p>
              <span>&copy;BVBR-ABDC</span>
            </p>
          </div>
        </div>
        <div class="span6">
          <ul class="social-network">
            <li><a href="#" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-square"></i></a></li>
            <li><a href="#" data-placement="bottom" title="Twitter"><i class="icon-twitter icon-square"></i></a></li>
            <li><a href="#" data-placement="bottom" title="Linkedin"><i class="icon-linkedin icon-square"></i></a></li>
            <li><a href="#" data-placement="bottom" title="Pinterest"><i class="icon-pinterest icon-square"></i></a></li>
            <li><a href="#" data-placement="bottom" title="Google plus"><i class="icon-google-plus icon-square"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
</html>

Bootstrap模板: https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/

1 个答案:

答案 0 :(得分:0)

在此示例中使用的所有文件引用都是相对于页面路径的,因此文件必须位于该位置。由于ASP.net将在(例如)http://localhost:33333/处启动默认的“主页”页面,因此浏览器将请求url + css / filename.css,这将适用于第一页。

尽管如果您导航到http://localhost:33333/Home/Index(基本上是同一页面),它将不再起作用,因为浏览器将请求url + / home / index相对路径+ css / filename.css的css (导致找不到http://localhost:333333/home/css/filename.css

您可以通过以下方法很容易地解决此问题:更改您的layout.cshtml:

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

对此:

<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" />
<!--        ^                                                      --->

如您所见,文件路径之前有一个斜杠(/)。这将指示浏览器始终使用URL的根,而不是当前位置的相对路径。

相关问题