html - 如何将 MDL 上的网格间距调整为基础或 Bootstrap 的网格间距？

Question

如何设置 Material Design Lite 网格系统的 gutter 宽度，

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

Stretches the cell vertically to fill the parent

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

Answer 1

我添加了一个 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>

希望这对您有所帮助。