web-dev-qa-db-fra.com

Espacement entre les lignes avec Materialise CSS

Avec MaterializeCSS, comment puis-je ajuster/supprimer l’espacement vertical entre les lignes?

Exemple de code:

<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
10
Crash Override

Je l'ai compris. Placez chaque col dans une seule row éliminera l'espacement vertical.

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

C'est déroutant mais ça marche. Sur le plan conceptuel, je penserais qu'une "rangée" est comme une rangée de tableau, forçant tout son contenu à figurer sur une seule rangée, quelle que soit sa taille, mais cela fonctionne car chaque col a la taille s12 (pleine largeur). J'espère que cette réponse aide quelqu'un d'autre.

16
Crash Override

Je l'ai fait pour créer un espace rapide avec espace libre et marge si besoin est.

<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
}
1
Gino

Utilisez ces méthodes:

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

Alors le problème avec l’espace non désiré disparaîtra ..__ Ensuite, vous pouvez ajouter n’importe quel autre style à votre div.

1
Deepak swain

J'ai corrigé que fournir un hauteur fixe au .cols sur le plus grand écran. Si votre .col hauteur peut être corrigé (utilisez probablement une autre classe et corrigez-la, ou utilisez le plus grand écran ou l'écran à l'origine de ce problème, ce qui, j'en suis sûr, est le plus affecté.).

Voici un extrait qui a fonctionné pour moi quand il y a plusieurs .col qu'une ligne de grille 12 peut attacher à celui-ci: 

.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;
}

Pour votre solution, il était simplement nécessaire de mettre tous les .cols dans une ligne, car .row force la ligne suivante. Et il est évident qu’une rangée aurait besoin de remplir sa capacité .row; elle était donc bien fixée par vous-même.

0
Animesh Singh