如何在基础上平分网格

时间:2016-11-25 02:00:40

标签: twitter-bootstrap-3 zurb-foundation

我有一个页脚部分,我需要它分成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>

谢谢

1 个答案:

答案 0 :(得分:1)

您应该从元素中删除所有Find属性,然后使用className。正如文档中所述,基础网格与class元素一起使用,因此您可以对代码进行编码。

在此处阅读更多内容:http://foundation.zurb.com/sites/docs/grid.html#basics

并且页脚的方案如下:

<div class="">