Jquery 引导页脚未显示整页宽度

我正在尝试以下代码。 我试图在我的代码上显示完整的页脚。 但这是行不通的

<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>

服务条款

感谢您选择我们提供的服务。

问题是它不工作的全宽度页脚

我的工作演示是。

---

如何解决此问题

使用footer div包装容器，而不是相反：

您的“容器”类的宽度为750px。您可以使用不同的类，而不使用宽度？

问题在于您用于页脚的容器。试着用

.container fluid

这是更新后的

这样，页脚将始终位于下方

            <footer class="navbar navbar-default navbar-fixed-bottom"> <div class="container">
   <div class="row">     
     <div class="col-sm-4  ">
      <span class="center-to-left">       
     </span>          
   </div>
    <div class="col-sm-4" style="vertical-align: middle;">
         <div class="text-center" >
           <a href="#" class="text-success">About</a>
             <a href="#" class="text-success">Terms</a>
             <a href="#" class="text-success">Privacy</a>
             <a href="#" class="text-success">Contact</a>
         </div>
     </div>
     <div class="col-sm-4 ">        
     </div>
 </div>
 </div>
</footer>

您的

页脚

位于

容器分区。

您已经将容器的宽度指定为

750px

。所以

footer

采用该宽度。将您的

页脚

放在

容器div

之外，这样您就可以解决问题。

用于页脚宽度为750px的类

容器

，它始终保持左右边距。您需要使用另一个类，例如iam使用的

页脚容器

没有任何宽度，这必须解决您的问题
尝试以下解决方案

 <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>

服务条款

感谢您选择我们提供的服务。

---

您可以查看结果

问题是页脚也充当容器，无需将页脚放入容器中。

---

移除容器问题将解决

我昨天在一个网站上工作，遇到了相同的问题。如果您使用的是标准的Bootstrap3.0库，您可能希望尝试以下内容

<div class="footer">
 <div class="container">            
  <p class="text-muted footer-text">
   Your Content Here
  </p>
 </div>
</div>

---

您需要更改代码中的固定宽度容器类。它必须解决您的问题。请尝试下面的解决方案…谢谢。如果我的答案是您对该问题的预期解决方案，请验证答案。这样其他人就可以很容易地找到正确的解决方案。。非常感谢。

<div class="footer">
 <div class="container">            
  <p class="text-muted footer-text">
   Your Content Here
  </p>
 </div>
</div>

.footer {
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: #F5F5F5;
}