如何制作超过12列的网格?我想制作一个网格来表示一天24小时半小时的增量(共48列)。
<div class="row display">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
</div>
答案 0 :(得分:3)
您只需使用nested Grid
即可。
首先,您将row
划分为2 columns
。比你把12小时放在每个部分:
<div class="row">
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">2</div>
<div class="small-2 large-1 columns">3</div>
<div class="small-2 large-1 columns">4</div>
<div class="small-2 large-1 columns">5</div>
<div class="small-2 large-1 columns">6</div>
<div class="small-2 large-1 columns">7</div>
<div class="small-2 large-1 columns">8</div>
<div class="small-2 large-1 columns">9</div>
<div class="small-2 large-1 columns">10</div>
<div class="small-2 large-1 columns">11</div>
<div class="small-2 large-1 columns">12</div>
</div>
</div>
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">13</div>
<div class="small-2 large-1 columns">14</div>
<div class="small-2 large-1 columns">15</div>
<div class="small-2 large-1 columns">16</div>
<div class="small-2 large-1 columns">17</div>
<div class="small-2 large-1 columns">18</div>
<div class="small-2 large-1 columns">19</div>
<div class="small-2 large-1 columns">20</div>
<div class="small-2 large-1 columns">21</div>
<div class="small-2 large-1 columns">22</div>
<div class="small-2 large-1 columns">23</div>
<div class="small-2 large-1 columns">24</div>
</div>
</div>
</div>
答案 1 :(得分:2)
您可以在Zurb的this subpage上自定义Foundation,您可以为自己设置48列。然后,您可以使用从.large-1
到.large-48
的大型课程,以及从.small-1
到.small-48
的小班级。
答案 2 :(得分:0)
在寻找类似的东西之后,终于想出了如何用粉底混合物做到这一点。
在另一个scss文件中,您可以按如下方式创建自定义类。这仅实现了&#34; large-x&#34;的编码。此父类的子类。我将total-columns变量重置为12以防万一。
@import "foundation/components/grid"
.customClassName {
$total-columns:24;
@include grid-row();
@include grid-html-classes($size:large);
$total-columns:12;
}
这给了我一个24列的网格,我可以放在任何地方,而不会覆盖项目中基础的默认值。
答案 3 :(得分:0)
最有可能出现多种解决方案。我试过周杰伦的解决方案,它不起作用 - 不知道为什么?所以我发现了另一种解决方案 - 基金会中有一个可以使用的功能。
我们假设您将字母A-Z作为列表输出:
<ul>
<li class="grid-26">A</li>
...
<li class="grid-26">Z</li>
</ul>
在您的SCSS中,创建您的类并调用grid-calc函数:
.grid-26 {
width: grid-calc(1, 26);
}
这将返回宽度等于1/26或3.84615%
打扮SCSS,使每个li浮动,文本居中:
.grid-26 {
width: grid-calc(1, 26);
float: left;
text-align: center;
}