如何在基础

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