Html 如何在MDL上调整网格槽作为基础或引导？

如何设置Material Design Lite网格系统的边沟宽度

使用mdl， 基本网格

<div class="demo-grid-ruler mdl-grid container">
  <div class="mdl-cell mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell mdl-cell--1-col fl-9">12</div>
</div>

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

这是MDL VS基金会的屏幕截图，

如何将檐槽宽度固定为零

设置一个

更新：

挖掘文档后，存在一个类

mdl单元--拉伸

垂直拉伸单元格以填充父单元格

---

这样会改变网格，但仍然不好

如果您只想将排水沟减小到“0”，则应执行以下操作：

.mdl-cell { margin:0; }   

但是，在

.mdl cell--1-col

上还有一个

calc

函数，该函数考虑了该边距：

.mdl-cell--1-col {
  width: calc(8.33333% - 16px);
}   

因此，如果您想在整个父级宽度内拉伸所有

mdl单元格

，则需要将其重置为忽略16px扣减，这将导致：

.mdl-cell--1-col {
  width: 8.33333%;
}   

编辑：
Material Design Lite的CSS包含一个专门用于此目的的类，名为

mdl grid——无间距

。为了使用它，需要将其添加到父元素

mdl网格

，如下所示：

div class="demo-grid-ruler mdl-grid mdl-grid--no-spacing container">
  <div class="mdl-cell mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell mdl-cell--1-col fl-9">12</div>
</div>    

div class=“演示网格标尺mdl grid mdl grid——无间距容器”>
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

---

这是以MDL的方式完成的。这说明了这一点。

边沟是由边距（据我所见为8px）构成的，因此您可以将边距归零

如果你这样做，你将不得不重置宽度

.mdl-cell {
    margin: 0;
}

.mdl-cell--1-col {
    width: 8.33333%;
}

显然需要额外的调查。

已经在上打开了一个问题，并且知道了这一点

在

mdl网格中添加类，
mdl网格--no space
可以解决这个问题。因为它不知怎么从文档中被跳过了

<div class="demo-grid-ruler mdl-grid container mdl-grid--no-spacing">
  <div class="mdl-cell--stretch mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-9">12</div>
</div>


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

更新了
我添加了一个sass循环，向mdl网格添加了一个修饰符，这样我就可以在标记中使用类mdl grid--GROUT-16，并且单元格宽度和边距将相应地调整

（我只向$mdl grid GAILT sass变量添加了几个边沟选项；0、16、20和24。只需将您喜欢的边沟值添加到该变量中即可）

SASS：

标记：

 <div class="mdl-grid mdl-grid--gutter-0">
   <div class="mdl-cell mdl-cell--6-col">...</div>
 </div>


...

希望这有帮助。
与更新效果相同，添加类
mdl单元--stretch
Ah-您最初没有提到这一点。正如@Paulie_D所指出的那样，添加
.mdl cell--1列{width:8.33333%；}
就可以了。这很有效。正在等待是否存在执行此操作的mdl类。两天后接受。谢谢你，伙计。我还要说，mdl的文档是我见过的最差的。简直找不到任何东西。
 <div class="mdl-grid mdl-grid--gutter-0">
   <div class="mdl-cell mdl-cell--6-col">...</div>
 </div>