將頁腳之后的其余部分的顏色更改為（頁腳顏色/黑色）-引導程序
[英]change the color of the remaining part after footer to (footer color / black) - bootstrap
問題描述
如何將零件的顏色更改為其他顏色？ 我希望該顏色與頁腳顏色相同。 我怎樣才能做到這一點？ 我需要什么CSS或HTML代碼？ 我正在使用bootstrap3。已經嘗試過： 如何在對我不起作用的頁腳后的頁面底部放置黑色 。
我的_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="address@example.com"> </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秒前
1 個解決方案
解決方案1
0 2016-08-18 09:15:56
嘗試將主體的背景色設置為黑色：
在您的CSS更改中：
body {
padding-top: 50px;
padding-bottom: 20px;
background: #000;
}
頁腳后更改顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.