web-dev-qa-db-ja.com

マテリアライズCSSを使用した行間の間隔

MaterializeCSSを使用して、行間の垂直間隔を調整/削除するにはどうすればよいですか？

コード例：

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
</div>
<div class="row">
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

unwanted space with MaterializeCSS

materialize
11
Crash Override

私はそれを考え出した。各colを1つのrow内に配置すると、垂直方向の間隔がなくなります。

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

紛らわしいですが、動作します。概念的には、「行」はテーブルの行のようなものだと思います。サイズに関係なく、その中のすべてが単一の行になるように強制しますが、これは各colにs12（全幅）サイズ。この答えが他の誰かを助けることを願っています。

18
Crash Override

必要に応じて、クリアでマージンのある高速なスペースを作るためにこれを行いました。

<div class="clear-10"></div>

.clear, .clear-10, .clear-15 {
  clear: both;
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px
}
.clear-15 {
  margin-bottom: 15px
}
2
Gino

これらの方法を使用してください：

.row .col{
    padding: 0 !important;
}

そうすれば、不要なスペースの問題は解消されます。次に、divに他のスタイルを追加できます

2
Deepak swain

大きな画面の.colsにfixed heightを提供するように修正しました。あなたの.colの高さを修正できる場合（おそらく他のクラスを使用し、それらを修正するか、この問題が発生する大きな画面または画面を修正します。これにより、中程度の列が最も影響を受けます。）.

以下は、12グリッドの行にアタッチできる.colが複数ある場合に機能するスニペットです。

.container {
  padding: 2.4em;
}

.container .row .col.m4 {
  margin-top: 3em;
  height: 42em; //put your required height which fix this by testing.
  width: 33%;
}  


@media screen and (min-width:10px) and (max-width: 640px){
  .container {
    padding: .5em;
  }
  .container .row .col.s12 {
    width: 100%;
    /*height: 45em;*/ We don't need that to be fixed in small devices
  }
}

.container .row {
  margin-top: 1.2em;
}

あなたのソリューションでは、.colが次の行を強制するので、すべての.rowを1行に配置する必要があるだけでした。そして、1つの行が.rowの容量を満たす必要があることは明らかであるため、自分で修正することをお勧めします。

0
Animesh Singh