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

将此类添加到全宽行：

＆＃xA;＆＃xA;

  .full-width {＆＃xA;宽度：100％;＆＃xA; margin-left：auto;＆＃xA; margin-right：auto;＆＃xA; max-width：initial;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

然后将 footer 与第一个合并div 并添加类全角：

＆＃xA;＆＃xA;

旧

＆＃xA;＆＃xA;

 ＆lt; footer class =“footer”＆gt;＆＃xA; ＆lt; div class =“row”＆gt;＆＃xA;＆＃xA; [...]＆＃XA;＆＃XA; ＆LT; / DIV＆GT;＆＃XA;＆LT; /页脚＆GT;＆＃XA;

＆＃XA;＆＃XA; 新
＆＃XA;＆＃XA;  ＆lt; footer class =“row footer full-width”＆gt;＆＃xA;＆＃xA; [...]＆＃xA;＆＃xA;＆lt; / footer＆gt;＆＃xA;  
＆＃xA;＆＃xA; 工作示例： CodePen链接< / A> 
＆＃XA;

基础页脚不是整页宽度

1 个答案: