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

2

「ガター」は余白 (私が見る限り 8 ピクセル) で作成されているため、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 に答える