jquery - 引导页脚未显示完整页面宽度

Question

我正在尝试以下代码。我试图在我的代码中显示整页页脚。但这不起作用。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.#.com" style="color: #830300"><i class="fa fa-cog fa-lg"></i> Site name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.#.com">Home</a></li>
                        <li><a href="About">About</a></li>
                        <li><a href="Contact">Contact</a></li>
                        <li><a href="Faq">FAQ</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Login">Login</a></li>
                        <li><a href="SignUp">Sign Up</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3"> </div>
                <div class="col-lg-9" style="text-align: justify">
                    <div class="page-header">
                        <h1 style="text-align: center; color: #830300">Terms of Service</h1>
                    </div>
                    <p>
                        Thank you for selecting the Services offered by us.
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div id="footer" style="background-color: #ccc;width: 100%;padding: 10px;text-align:center">
                    <ul class="list-inline">
                        <li><a href="About">About</a></li>
                        <li><a href="Terms">Terms</a></li>
                        <li><a href="Privacy">Privacy</a></li>
                        <li><a href="Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

问题是它不能使用全 Angular 页脚

我的工作演示是 here .如何解决这个问题

Answer 1

container 类用于宽度为 750px 的页脚，它始终保持 left 和 right 的边距。你需要使用一个不同的类，比如 iam 使用没有任何宽度的 footer-container，这必须解决你的问题
尝试以下解决方案

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="http://www.#.com" style="color: #830300"><i class="fa fa-cog fa-lg"></i> Site name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="http://www.#.com">Home</a></li>
                    <li><a href="About">About</a></li>
                    <li><a href="Contact">Contact</a></li>
                    <li><a href="Faq">FAQ</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="Login">Login</a></li>
                    <li><a href="SignUp">Sign Up</a></li>
                </ul>
            </div>
        </div>
</div><br>
    <div class="container">
        <div class="row">
            <div class="col-lg-3"> </div>
            <div class="col-lg-9" style="text-align: justify">
                <div class="page-header">
                    <h1 style="text-align: center; color: #830300">Terms of Service</h1>
                </div>
                <p style="text-align: center;">
                    Thank you for selecting the Services offered by us.
            </p></div>
        </div>
    </div>
    <div class="footer-container">
        <div class="row">
            <div id="footer" style="background-color: #ccc;width: 100%;padding: 10px;text-align:center">
                <ul class="list-inline">
                    <li><a href="About">About</a></li>
                    <li><a href="Terms">Terms</a></li>
                    <li><a href="Privacy">Privacy</a></li>
                    <li><a href="Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>

可以查看结果http://www.bootply.com/kGZkU3vSft