如何将MDL上的网格槽调整为基础或引导？

Question

如何设置材料设计网格系统的沟槽宽度，

有了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和基金会的截图，

如何将排水沟宽度修正为零？

设置了一个小提琴，

更新：

在深入研究文档之后，存在一个类。

mdl-cell--stretch

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

​

​

这样就改变了网格，但还是不行！

Answer 1

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

(我只向$mdl-网格- 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>

希望这能有所帮助。

Answer 2

如果您只想将排水沟缩小到"0"，这应该可以完成以下工作：

.mdl-cell { margin:0; }   

但是，calc函数在.mdl-cell--1-col上也考虑到了这一点：

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

因此，如果要将所有mdl-cells扩展到父级的整个宽度，则需要重置它以忽略16 it的推导，这将留给您以下内容：

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

编辑：

Material的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 way.This JSFiddle中的工作说明的。

Answer 3

“排水沟”是由边距(据我所能看到的8便士)制作的，所以您可以将margin调零。

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

.mdl-cell {
    margin: 0;
}

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

JSfiddle演示

显然需要额外的调查。