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>

问题是它没有使用全宽页脚

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

Answer 1

您用于宽度为750px的页脚的container类，它始终保持左右边距。你需要使用一个不同的类来说使用footer-container而没有任何宽度的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>

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

Answer 2

使用页脚div包装容器，而不是相反：http://jsfiddle.net/1hu3xtLr/1/

<div id="footer" style="background-color: #ccc;width: 100%;padding: 10px;text-align:center">
    <div class="container">
        <div class="row">
            <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>

Answer 3

您的容器＆＃39; class的宽度为750px。您可以使用不同的类，而不使用宽度？

Answer 4

问题在于您用于页脚的容器。尝试使用.container

更改.container-fluid

以下是更新后的Fiddle

Answer 5

这个怎么样http://jsfiddle.net/1hu3xtLr/4/这种方式页脚总是处于停机状态

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

Answer 6

您的footer位于container div.您已将容器宽度设为750px。所以footer占据了那个宽度。将footer放在container div之外，这样就可以解决问题了。

Answer 7

问题是页脚也是一个容器，不需要在容器内放置页脚。删除容器问题将解决

Answer 8

我昨天在网站上工作并遇到了同样的问题。如果您使用的是标准的bootstrap 3.0库，那么您可能需要尝试这些内容。

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

bootstrap页脚未显示整页宽度

8 个答案: