我使用_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>©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/
答案 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的根,而不是当前位置的相对路径。