web-dev-qa-db-fra.com

Matérialiser la marge du cadre entre les colonnes

Le cadre Materialize vient avec une mise en page étrange (du moins pour moi). Je ne trouve aucune marge entre les colonnes. Ceci est mon code: 

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

Et voici comment cela se passe dans le navigateur .

Il n'y a pas de marges entre les colonnes!

htmlcssmarginmaterialize
6
Kerlos Aguero

Je vous suggère d'utiliser un élément distinct dans une colonne, par exemple, .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>

11
Sergey Denisov

Les espaces entre les blocs .col sont implémentés via un remplissage dans Materialise. Donc, les éléments .col sont utilisés pour la mise en page.

Il convient de placer vos blocs visuels en tant qu’enfants d’éléments .col.

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

Le meilleur moyen est d'utiliser les classes fournies par le framework Materialize, il nous fournit une classe 'offset' pour ajouter des marges entre les colonnes. Par exemple, vous pouvez utiliser le code suivant pour ajouter des marges. Vous pouvez en apprendre davantage sur les grilles et les décalages ici.

JS Fiddle

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

Pour la version actuelle de Materializecss, ce n'est pas le cas.

J'ai modifié le code HTML pour une meilleure visualisation:

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


Le résultat ressemblera à celui ci-dessous:  enter image description here


Supposons maintenant que vous ne voulez pas le remplissage alors vous devez ajouter style="padding:0"

0
Henry

Aucune de ces réponses ne répond réellement à votre question. Je sais exactement ce que vous voulez dire. Materialise (contrairement à Boostrap) ne prend pas en compte le fait que vous utiliserez un en-tête ou une zone de contenu avec une couleur unie. Par conséquent, il ne fournit pas "d'espace-marge" comme 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>

Cela produirait un espace plein d'environ 15 pixels entre chaque marge, quel que soit le nombre de colonnes que vous créez. Cela se dégrade aussi bien.

Lorsque les autres utilisateurs vous demandent d’appliquer une solution de remplissage blanc, ils oublient que la colonne à droite de la page aura également un remplissage et gâchera donc la ligne de conteneurs située à droite de la page.

Je suggère d'utiliser des requêtes @media en fonction du nombre de colonnes

S'il n'y a que deux colonnes, vous pouvez définir padding-right sur ALL divs à 15px, mais pour la requête @media de grand écran, définissez nth-child (pair) (tous les divs situés à droite de l'écran avec un padding de 0px ;.

Gardez à l'esprit que cela rend toujours la colonne de gauche 15pix plus fine que la colonne de droite, et si vous avez un contenu uniforme, cela sera perceptible.

En ce sens, Materialise n'a pas réussi à fournir une solution d'espace vide pour la disposition des colonnes (en utilisant un remplissage au lieu d'un espace-marge global) et Bootstrap est simplement préférable dans ce domaine. Bonne chance à toi.

0
Mindsect Team

Je pense que vous avez seulement mis une colonne imbriquée. Cela va ajouter un rembourrage de .75rem de chaque côté. Vous devriez mettre vos antécédents dans la colonne imbriquée. J'espère que cela vous aidera.

0
Beto Aveiga