html - 基础页脚不是整页宽度

Question

我使用 Foundation 5 创建了一个网站，我遇到了一些问题，我的一些页面页脚没有填满页面的宽度。其他页面工作正常，页脚完美填充页面。任何帮助，将不胜感激。

这是我遇到问题的其中一个页面的页脚。

<footer class="footer">
   <div class="row">
      <div class="small-12 medium-6 large-5 columns">
         <div class="logo">
            <a href="index.html"><img src="img/logo.png" /></a>
         </div>
         <p class="footer-links">
            <a href="index.html">Home</a>
            <a href="aboutus.html">About</a>
            <a href="staff.html">Staff</a>
            <a href="comingsoon.html">Online Giving</a>
            <a href="http://vimeo.com/firstag">Sermon Videos</a>
            <a href="contactus.html">Contact</a>
         </p>
         <p class="copywrite">Copywrite © 2015 First Assembly of God, Lincolnton</p>
      </div>
      <div class="small-12 medium-6 large-4 columns">
         <ul class="contact">
            <li>
               <p><i class="fi-marker"></i>328 May Avenue<br>P.O. Box 457<br>Lincolnton, Georgia 30817</p>
            </li>
            <li>
               <p><i class="fi-telephone"></i>Phone | 706-359-7237<br>FAX | 706-359-6638</p>
            </li>
            <li>
               <p><i class="fi-mail"></i>office@firstaglincolnton.org</p>
            </li>
         </ul>
      </div>
      <div class="small-12 medium-12 large-3 columns">
         <p class="about">CONNECT WITH US</p>
         <p class="about subheader">Please visit our social media accounts to keep up with current events.</p>
         <ul class="inline-list social">
            <a href="http://twowhoagree.blogspot.com/"><i class="fi-social-blogger"></i></a>
            <a href="http://vimeo.com/firstag"><i class="fi-social-vimeo"></i></a>
            <a href="https://twitter.com/FirstAGofLC"><i class="fi-social-twitter"></i></a>
            <a href="https://www.facebook.com/pages/First-Assembly-of-God-Lincolnton/169771389824660"><i class="fi-social-facebook"></i></a>
         </ul>
      </div>
   </div>
</footer>

Answer 1

添加此类以获得全宽行:

.full-width {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

然后将 footer 与第一个 div 合并并添加 full-width 类:

旧

<footer class="footer">
   <div class="row">

   [...]

   </div>
</footer>

新

<footer class="row footer full-width">

[...]

</footer>

工作示例:CodePen link