기초 바닥글이 전체 페이지 너비가 아닙니다. (Foundation footer is not full page width)

문제 설명

기초 바닥글이 전체 페이지 너비가 아닙니다. (Foundation footer is not full page width)

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

참조 솔루션

방법 1:

Add this class to have full width row:

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

Then merge footer with the first div and add the class full‑width:

Old

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

   [...]

   </div>
</footer>

New

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

[...]

</footer>

Working example: CodePen link

(by Ben Hand、Knut Holm)

참조 문서

1. Foundation footer is not full page width (CC BY‑SA 2.5/3.0/4.0)