0

如何设置 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基础的截图，

如何将排水沟宽度固定为零？

已经设置了一个小提琴，

更新：

挖掘文档后，存在一个类

mdl-cell--stretch

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

在此处输入图像描述

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

4

4 回答 4

4

在MDL 的 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>

更新的小提琴

于 2015-07-22T16:33:26.393 回答
2

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

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

.mdl-cell {
    margin: 0;
}

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

JSfiddle 演示

显然需要额外的调查。

于 2015-07-22T15:08:55.800 回答
1

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

.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说明了它。

于 2015-07-22T15:02:08.827 回答
0

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

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

萨斯：

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

希望这可以帮助。

于 2016-08-23T03:27:25.130 回答