如何将 MDL 上的网格间距调整为基础或引导程序的网格间距？

Question

如何设置 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>

这是mdl vs基础的截图，

如何将装订线宽度固定为零？

已设置fiddle,

更新：

挖掘文档后，有一个类

mdl-cell--stretch

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

以这种方式改变网格，但仍然不行！

Answer 1

如果您只想将装订线减少到“0”，这应该可以完成工作：

.mdl-cell { margin:0; }   

而且，.mdl-cell--1-col 上还有一个 calc 函数，它考虑了该边距：

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

因此，如果您想在父级的整个宽度上拉伸所有 mdl-cells，则需要将其重置为忽略 16px 扣除，这样您就可以：

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

编辑：
Material Design Lite 的 CSS 包含一个专门用于此目的的类，命名为 mdl-grid--no-spacing。为了使用它，需要将其添加到父元素mdl-grid，如下所示：

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>    

这以 MDL 方式完成工作。JSFiddle 说明了它。

Answer 2

“排水沟”是由边距（据我所知为 8 像素）制作的，因此您可以将 margin 归零。

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

.mdl-cell {
    margin: 0;
}

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

JSfiddle Demo

显然需要额外调查。

Answer 3

在MDL's GitHub 上打开了一个问题，并了解了这一点

将类 mdl-grid--no-spacing 添加到 mdl-grid 可以解决此问题。因为它以某种方式从文档中跳过。

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

更新fiddle

Answer 4

我添加了一个 sass 循环来为 mdl-grid 添加一个修饰符，这样我就可以在我的标记中使用 mdl-grid--gutter-16 类，并且单元格的宽度和边距会相应地调整。

（我只向 $mdl-grid-gutter sass 变量添加了一些装订线选项；0、16、20 和 24。只需将您喜欢的装订线值添加到该变量即可）

SASS：

$mdl-grid-gutter: 0 16 20 24;
$mdl-grid-columns: 12;

@each $space in $mdl-grid-gutter {
  .mdl-grid--gutter-#{$space} {
    padding:0px;
    > .mdl-cell {
      margin:#{$space}px;
      width:calc(33.3333333333% - (#{$space}px * 2));
      @for $i from 1 through $mdl-grid-columns {
        &.mdl-cell--#{$i}-col {
          width:calc(100%/(12/#{$i}) - (#{$space}px * 2));
        }
      }
    }
  }
}

标记：

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

希望这会有所帮助。