ZURB基金会:我应该为每个“行”创建行吗?

时间:2013-07-09 13:16:48

标签: zurb-foundation

那么,我可以创建一个<div class="row">并推送列吗?列的总长度将更大12个单位。是不好的风格,我应该为每一行创建行?

1 个答案:

答案 0 :(得分:7)

这取决于您想要的行为。如果你连续有超过12列,它们将包裹到下一行,因为它是

一行中超过12列将包装

<div class="row">
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>
 <div class="small-2 large-4 columns">. . .</div>   
</div>

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |    
|                     |                       |                       |
-----------------------------------------------------------------------
|                     |                       |
|   div4              |      div5             |
|                     |                       |
-----------------------------------------------

相当于2行

    <div class="row">
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
   </div>
   <div class="row">
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
     <div class="small-2 large-4 columns">...</div>
   </div>

|  1 |  2 |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10 |  11 |  12 |

-----------------------------------------------------------------------
|                     |                       |                       |
|   div1              |      div2             |      div3             |  (row 1)
|                     |                       |                       |
-----------------------------------------------------------------------

-----------------------------------------------
|                     |                       |
|   div1              |      div2             |   (row 2)
|                     |                       |
-----------------------------------------------

此处有更多细节Understanding Div classes in Foundation 4