Question

如何将该部分的颜色更改为其他颜色？我希望它与页脚颜色的颜色相同。我怎样才能做到这一点？我需要什么css或html代码？我正在使用bootstrap 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>&copy; @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 &amp; 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 &amp; 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">
                        &copy;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秒前

Answer 1

尝试将正文的背景颜色设置为黑色：

在你的css改变中：

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: #000;
}

将页脚后面的剩余部分的颜色更改为（页脚颜色/黑色） - 引导程序

1 个答案: