如何将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 foundation的截图，

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

已设置fiddle,

更新

在挖掘文档后，存在一个类

mdl-cell--stretch

  

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

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

Answer 1

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

'天沟是由边距（我可以看到8px）制作的，所以你可以将margin归零。

如果你这样做，你必须重置宽度。

.mdl-cell {
    margin: 0;
}

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

JSfiddle Demo

显然需要进一步调查。

Answer 3

如果您只想将排水沟减少到＆＃34; 0＆＃34;，这应该可以胜任：

.mdl-cell { margin:0; }   

但是，calc上有一个.mdl-cell--1-col函数可以考虑这个余量：

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

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

（我只在$ mdl-grid-gutter sass变量中添加了一些gutter选项; 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>

希望这有帮助。