【发布时间】：2014-07-06 12:55:51
【问题描述】：
问题背景：
我正在尝试使用 Twitter 引导程序创建一个简单的 ASP.NET MVC 网站。我在 MVC 项目中使用 Microsoft VS2013 Express。
问题：
我已经下载了一个 Bootstrap 网站，应该如下所示：
我现在的样子：
到目前为止，我做了以下无济于事：
-
删除了_layout.cshtml页面的内容，添加了我下载的'MetroMan'主题的Index.html的Header和Footer。
2.将“Scripts”文件夹的内容替换为 MetroMan 主题的 Scripts 文件夹的内容。
3.在项目的“Contents”文件夹下创建了一个“Template”文件夹。在此我添加了 img、css、fonts 文件夹以及 MetroMan 主题中的相应内容。
_Layout.cshtml 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title here -->
<title>MetroMan</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" href="css/settings.css" media="screen" />
<!-- Navigation menu -->
<link rel="stylesheet" href="css/ddlevelsmenu-base.css">
<link rel="stylesheet" href="css/ddlevelsmenu-topbar.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- cSlider -->
<link rel="stylesheet" href="css/slider.css">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- Sliding panel starts-->
<div class="slidepanel">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="spara">
<!-- Contact details -->
<p>
<i class="fa fa-envelope-o lightblue"></i> something@gmail.com
@*<i class="fa fa-twitter lightblue"></i> @something *@
<i class="fa fa-desktop lightblue"></i> 123-456-7890
</p>
</div>
</div>
<div class="col-md-4">
<div class="social">
<!-- Social media icons. Repalce # with your profile links -->
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sliding panel ends-->
<!-- Header starts -->
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo starts -->
<div class="logo">
<div class="logo-image">
<!-- Image link -->
<a href="index.html"><i class="fa fa-desktop blue"></i></a>
</div>
<div class="logo-text">
<h1><a href="index.html">Metro<span class="lightblue">Man</span></a></h1>
<div class="logo-meta">Cool Metro Theme</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Logo ends -->
</div>
<div class="col-md-9 col-sm-8">
<!-- Navbar starts -->
<div class="navi pull-right">
<div id="ddtopmenubar" class="mattblackmenu">
<!-- Main navigation -->
<!-- Use the background color class in anchor tag for colorful menu -->
<ul>
<li>
<a href="#" rel="ddsubmenu2" class="blightblue"> <i class="fa fa-home"></i> Home</a>
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.html">Revolution Slider</a></li>
<li><a href="index-parallax.html">Parallax Slider</a></li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bred"> <i class="fa fa-desktop"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="landingpage.html">Landing Page</a></li>
<li><a href="comingsoon.html">Coming Soon</a></li>
<li><a href="features2.html">Features</a></li>
<li><a href="service1.html">Service</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li>
<a href="#">Sub Navigation</a>
<ul>
<li><a href="#">Nav Level #3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bviolet"> <i class="fa fa-tablet"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="404.html">404</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pricingtable.html">Pricing Table</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</li>
<li>
<a href="#" rel="ddsubmenu2" class="bgreen"> <i class="fa fa-comments"></i> Blog</a>
<!-- Sub navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="blog2.html">Blog #1</a></li>
<li><a href="blog1.html">Blog #2</a></li>
<li><a href="blogsingle.html">Blog Single</a></li>
</ul>
</li>
<li><a href="portfolio.html" class="borange"> <i class="fa fa-camera"></i> Portfolio</a></li>
<li><a href="contactus.html" class="bblue"> <i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
<div class="navis"></div>
<!-- Navbar ends -->
<div class="clearfix"></div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<!-- Header ends -->
@RenderBody()
<!-- Footer -->
<!-- Below area is for testimonial -->
<div class="foot blightblue">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- User icon -->
<span class="twitter-icon text-center"><i class="fa fa-user"></i></span>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum dolor eget nisi <br />fermentum quis hendrerit magna vestibulum."</em></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="widgets">
<div class="col-md-3">
<div class="fwidget">
<h4>Contact</h4>
<p>Nullam justo nunc, dignissim at convallis posuere, sodales eu orci. </p>
<hr />
<i class="fa fa-home"></i> 123, Some Area. Los Angeles, CA, 54321.
<hr />
<i class="fa fa-phone"></i> +239-3823-3434
<hr />
<i class="fa fa-envelope-o"></i> <a href="mailto:#">someone@company.com</a>
<hr />
<div class="social">
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Categories</h4>
<ul>
<li><a href="#">Condimentum - Condimentum gravida</a></li>
<li><a href="#">Etiam at - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
<li><a href="#">Vivamus - Condimentum gravida</a></li>
<li><a href="#">Pellentesque - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Subscribe</h4>
<p>Duis leo risus, condimentum ut posuere ac, vehicula luctus nunc. Quisque rhoncus, a sodales enim arcu quis turpis.</p>
<p>Enter you email to Subscribe</p>
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control" id="subscribe" placeholder="Subscribe...">
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Recent Posts</h4>
<ul>
<li><a href="#">Sed eu leo orci, condimentum gravida metus</a></li>
<li><a href="#">Etiam at nulla ipsum, in rhoncus purus</a></li>
<li><a href="#">Fusce vel magna faucibus felis dapibus facilisis</a></li>
<li><a href="#">Vivamus scelerisque dui in massa</a></li>
<li><a href="#">Pellentesque eget adipiscing dui semper</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copy">
<p>Copyright © <a href="#">Your Site</a> - <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contactus.html">Contact Us</a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="fa fa-angle-up"></i></a></span>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js"></script>
<!-- isotope -->
<script src="js/jquery.isotope.js"></script>
<!-- Navigation menu -->
<script src="js/ddlevelsmenu.js"></script>
<!-- jQuery cSlider / Extra script for cslider -->
<script src="js/jquery.cslider.js"></script>
<script src="js/modernizr.custom.28468.js"></script>
<!-- Support -->
<script src="js/filter.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
<!-- This page JS -->
<script>
/* JS for SLIDER REVOLUTION */
jQuery(document).ready(function () {
jQuery('.tp-banner').revolution(
{
delay: 9000,
startheight: 500,
hideThumbs: 10,
navigationType: "none",
hideArrowsOnMobile: "on",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide: -1,
stopAfterLoops: -1,
shadow: 0,
fullWidth: "on",
fullScreen: "off"
});
});
</script>
</body>
</html>
【问题讨论】：
-
通常与 css 相关！无法找到正确的文件或选择器的正确定位。
-
包括 _Layout.cshtml 的 head 部分，因为这就是问题所在。它没有加载 CSS
-
你能检查一下浏览器控制台吗？可能是显示缺少 css 文件或其他错误。检查 css 文件的加载位置。
-
@arserbin3 非常感谢，你是对的。如果可以，请将其设置为您的答案，我将其标记为正确。
标签： c# css asp.net-mvc twitter-bootstrap