web-dev-qa-db-ja.com

列間のフレームワークマージンを具体化する

Materializeフレームワークには奇妙なレイアウトが付属しています（少なくとも私にとっては）。列間のマージンが見つかりません。これは私のコードです：

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

これがブラウザでの表示方法です 。

列間にマージンはありません！

htmlcssmarginmaterialize
8
Kerlos Aguero

列内で別の要素を使用することをお勧めします。たとえば、.col-content：

JSFiddle

body {
    color: white;
}

.blue {
    background: blue;
}

.black {
    background: black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
        <div class="col s4">
            <div class="col-content black">kerlos</div> 
        </div>
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
    </div> 
</div>
13
Sergey Denisov

.colブロック間の空白は、Materializeのパディングを介して実装されます。したがって、.col要素はレイアウトに使用されます。

視覚ブロックを.col要素の子として配置するだけです。

例– https://jsfiddle.net/y2dahvg5/

<div class="row">
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <!-- Another items ... -->
</div>
4
AntonAL

最善の方法は、Materializeフレームワークによって提供されるクラスを使用することです。これにより、列間のマージンを追加するためのクラス「オフセット」が提供されます。たとえば、次のコードを使用してマージンを追加できます。グリッドとオフセットについて詳しく知ることができます こちら

JSフィドル

CSS

.green {
    background: green;
}
.black {
    background: black;
    color: #fff;
}

HTML

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

 <div class="container">
    <div class="row">
        <div class="col s3 offset-s1 green">
            kerlos
        </div>
        <div class="col s3 offset-s1 black">
            kerlos
        </div>
        <div class="col s3 offset-s1 green">
            kerlos
        </div>
    </div> 
</div>
1
Aakash

現在のMaterializecssバージョンでは、これは当てはまりません。

視覚化を向上させるためにHTMLコードを変更しました。

<div class="container">
<div class="row">
  <div class="col s4 teal">
      <span class="teal lighten-2">kerlos</span>      
  </div>
  <div class="col s4 red">
            <span class="teal lighten-2">kerlos</span>      

 </div>
  <div class="col s4 teal">
        <span class="teal lighten-2">kerlos</span>      
 </div>
</div> 
</div>


結果は次のようになります： enter image description here


ここで、パディングが不要だとすると、style="padding:0"を追加する必要があります

0
Henry

これらの答えはどれも実際にはあなたの質問に答えていません。私はあなたが何を意味するのか正確に知っています。 Materialise（Boostrapとは異なり）は、無地のヘッダーまたはコンテンツ領域を使用することを考慮していないため、Bootstrapのような「マージンスペース」を提供しません。

<div class="col-md-6"><div style="background: blue;">blue</div></div>
<div class="col-md-6"><div style="background: blue;">blue</div></div>

これにより、作成する列の数に関係なく、各マージンの間に約15ピクセルの空白が生成されます。また、劣化も良好です。

他のユーザーがブランケットパディングソリューションを適用するように指示しているとき、彼らはページの右側の列にもパディングがあり、そのためページの右側のコンテナーの行を台無しにすることを忘れています。

列の数に応じて@mediaクエリを使用することをお勧めします

列が2つしかない場合は、すべてのdivのpadding-rightを15pxに設定できますが、大画面の@mediaクエリの場合は、nth-child（even）を設定します（すべてのdivが画面の右側にパディングされます）の0px;。

これにより、左側の列が右側の列よりも15pix thinnerになることに注意してください。コンテンツが統一されている場合は、目立つようになります。

この意味で、Materializeは適切な列レイアウトのホワイトスペースソリューションを提供できず（グローバルマージンスペースの代わりにパディングを使用）、この領域ではBootstrapの方が優れています。幸運を祈ります。

0
Mindsect Team

ネストされた列を配置しただけだと思います。これにより、両側に.75remのパディングが追加されます。ネストした列に背景を配置する必要があります。お役に立てば幸いです。

0
Beto Aveiga