如何在基礎

Question

平分網我有一個頁腳其中部分，我需要它被分隔成4個部分。 2向上和2向下。這個怎麼做？我附上了代碼。我附上了我想要的圖像。

Click to see Image

<div className="footer"> 

     <div className="row full-width"> 

     <div className="large-6 columns"> 
      <div className="row"> 

      <div className="small-12 medium-3 large-4 columns"> 
       <img className="" src="" alt="logo"/> 
          <div className="contact-info"> 
           <p className="address">address</p> 
           <p className="email"><a href="mailto: "></a>mail</p> 
           <p className="tele"><a href="tel:">53343</a></p> 
          </div>  
      </div> 

      <div className="small-6 medium-3 large-8 columns"> 

      <div className="row"> 
       <ul className="list-unstyled "> 
         <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Fast Shipping</p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Free Return</p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Price Gurantee </p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Online Support</p> 
         </li>  
       </ul> 
      </div> 
      </div> 


      </div> 
      </div> 

      <div className="large-6 columns"> 
      <div className="row"> 

     </div> 
     </div> 
     </div> 
    </div> 

感謝

Answer 1

你應該從你的元素刪除所有className性質，只是使用class。正如文檔中提到的那樣，基礎網格與<div class="">元素一起工作，所以您的代碼會有點混亂。

在這裏閱讀更多：http://foundation.zurb.com/sites/docs/grid.html#basics

和頁腳的方案是這樣的：

<div class="row footer"> 
    <div class="small-6 columns"> 
     <img src="..."> 
     <p>some text</p> 
    </div> 
    <div class="small-6 columns">...</div> 
    <div class="small-6 columns">...</div> 
    <div class="small-6 columns">...</div> 
</div><!-- end of row -->