0
我如何更改部分的顏色到別的東西？我希望這是與頁腳顏色相同的顏色。 我該怎麼做？ 我需要什麼css或html代碼？ 我正在使用引導程序3. 已嘗試： How to put black color in the bottom of the page after footer 這對我不起作用。
我_Layout.cshtml的HTML：
<!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>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
HEADER<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
sidebar
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
@RenderBody()
</div>
<div class="col-md-12">
content2
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-static-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
FOOTER
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<hr />
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</div>
</div>
<footer class="navbar-default">
<div class="container">
<div class=」row bottom-rule」>
<div class="col-sm-4 footer-section">
<strong>Connect with Best Store</strong>
<p>Email promotions, news, and information</p>
<form class="form-inline">
<div class="form-group">
<label class="sr-only"
for="inputEmail">Email</label>
<input type="email"
class="form-control"
id="inputEmail"
placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
</form>
</div>
<div class="col-sm-5 footer-section">
<ul class="list-inline">
<li class="text-uppercase">Customer Service:</li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Our Guarantee</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Product Guides</a></li>
<li><a href="#">Customer Care</a></li>
</ul>
<ul class="list-inline">
<li class="text-uppercase">Social Media & Articles:</li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">The Best Journal</a></li>
</ul>
<ul class="list-inline">
<li class="text-uppercase">Events:</li>
<li><a href="#">Hangout April 30</a></li>
<li><a href="#">Makers Faire</a></li>
</ul>
</div>
<div class="col-sm-3">
<address>
<strong>Best Store</strong><br>
1000 Some Fantastic Place<br>
San Francisco, CA 94103<br>
(123) 456-7890 (phone & text)<br>
<a href="#">Contact Us</a>
</address>
</div>
</div>
<div class="row bottom-rule">
<div class="col-sm-12">
<nav class="navbar navbar-default navbar-footer">
<ul class="nav navbar-nav">
<li><a href="#">Customer Care</a></li>
<li><a href="#">Summer Lookbook</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">About Best Store</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">The Best Journal</a></li>
</ul>
</nav>
</div>
</div><!-- end row -->
<div class="row leg-room">
<div class="col-md-12 text-center">
<h1 class="text-uppercase">Best Store</h1>
<p class="monospaced">
©2016 Best Store Company Inc.
<span class="text-uppercase">All Rights Reserved</span>
</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</footer>
</body>
</html>的site.css：
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/* my */
.bottom-rule {
border-bottom: 1px solid lightgray;
}
footer {
padding-top: 20px;
border-top: 10px solid #332e20;
background-color: white;
}
.footer-section {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid lightgray;
}
@media (min-width: 768px) {
.footer-section {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
footer .list-inline li:not(:first-child):not(:last-child) {
border-right: 1px solid lightgray;
}
.navbar-footer {
background-color: inherit;
border-radius: 0;
border: none;
}
.navbar-footer {
margin-bottom: 0;
text-align: center;
}
footer .navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.leg-room { margin-bottom: 20px; padding-bottom: 20px; }
.monospaced { font-family: 'Ubuntu Mono', monospaced ; }使用的Visual Studio 2015
PS：我不想把身體背景的顏色改成黑色！ - user2548663 7秒前
我不想改變身體的背景顏色變黑！ – user2548663
我認爲這將是確定的，如果你創建一個div後頁腳，並給它的高度和背景顏色。 – Regolith
沒有解決它！ – user2548663