html - 无法在页面上水平拉伸(stretch)页脚

Question

我是网络开发的新手，我试图在我的网站上水平拉伸(stretch)页 footer 分，但它却显示为一个框。我反复尝试更改代码的每个 div 的背景，但没有成功。作为故障排除步骤，我还尝试了 this .我正在使用 Bootstrap 。

这是我的HTML:

    <div role="navigation" style="background-color: blue">
        <div class="container">
            <footer class="container-fluid" id="contact" style="width: 100%;">      
                <div class="row">
                    <div class="col-md-12">
                        <h2>Contact Us</h2>

                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8 boxes">
                                <div class="contact-box">
                                    <div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
                                    <div class="contact-details pull-left">
                                        <a href="#">221 Baker Street</a>
                                    </div>
                                </div>
                                <div class="contact-box extra-left-padding">
                                    <div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
                                    <div class="contact-details pull-left">
                                        <a href="mailto:fun@funny.nl">fun@funny.nl</a><br />
                                        <a href="tel:0000-0000-0000">000-000-000</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                        <span class="copyright">&copy; Hello!</span>
                    </div>
                </div>      
            </footer>
        </div>
    </div>  

还有我的CSS:

footer {
    background-color: #002776;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
    color: #F0F0F0;
    font-weight: 300;
    font-size: 14px;
}
footer h2 {
    margin: 0 0 40px;
    font-weight: 400;
}
footer div.boxes {
    text-align: center;
}
footer div.contact-box {
    display: inline-block;
    margin-bottom: 40px;
    width: 280px;
    vertical-align: top;
}
@media screen and (max-width: 767px) {
    footer div.contact-box {
        width: 90%;
    }
}
footer div.contact-box.extra-left-padding {
    padding-left: 80px;
}
@media screen and (max-width: 767px) {
    footer div.contact-box.extra-left-padding {
        padding-left: 0;
    }
}
footer div.contact-box div.contact-icon {
    background-color: #0038a9;
    padding: 6px;
    margin: 0 20px 20px 0;
    text-align: center;
    font-size: 2em;
}
footer div.contact-box div.contact-details {
    text-align: left;
    line-height: 1.75em;
}
@media screen and (max-width: 767px) {
    footer div.contact-box div.contact-details {
        font-size: 12px;
    }
}
footer span.contact-link {
    display: inline-block;
    padding: 0 10px 70px;
}
footer a {
    color: #F0F0F0;
}
footer a:hover {
    color: #00a1de;
}
footer span.copyright {
    color: #999;
    display: block;
    text-align: center;
    font-size: 14px;
}
footer span.copyright img {
    max-width: 75px;
    position: relative;
    top: -2px;
}

Answer 1

HTML 代码只能是:CSS 很好。

<footer class="container-fluid">      
                <div class="row">
                    <div class="col-md-12">
                        <h2>Contact Us</h2>

                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8 boxes">
                                <div class="contact-box">
                                    <div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
                                    <div class="contact-details pull-left">
                                        <a href="#">221 Baker Street</a>
                                    </div>
                                </div>
                                <div class="contact-box extra-left-padding">
                                    <div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
                                    <div class="contact-details pull-left">
                                        <a href="mailto:fun@funny.nl">fun@funny.nl</a><br />
                                        <a href="tel:0000-0000-0000">000-000-000</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                        <span class="copyright">&copy; Hello!</span>
                    </div>
                </div>      
            </footer>