Matérialiser cadre de la marge entre les colonnes

Matérialiser cadre est livré avec une étrange mise en page (au moins pour moi). Je ne trouve pas de marge entre les colonnes.
C'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 c'est de cette façon c'est de regarder dans le navigateur.

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

Il n'y a pas margins, seulement paddings entre les colonnes — github.com/Dogfalo/materialize/blob/master/dist/css/.... Quel est votre problème?
Mon problème est que si j'ai besoin de faire trois colonnes d'une ligne chacun dispose d'une solide expérience de la couleur, mais je veux de la marge d'entre eux, comment parvenir à concrétiser !?
Vous voulez que le contenu soit rembourré... ou vous voulez réellement l'espace BLANC autour de chaque colonne? quelle est votre solution souhaitée
Quel est le réel problème que vous tentez de résoudre? Qu'est-ce exactement que vous souhaitez atteindre?
J'ai le même problème, avec des boutons dans une grille. Le Matérialiser l'aide de la Grille de la page (materializecss.com/grid.html) semble utiliser frontière pour produire de l'écart. Même cela n'a pas fonctionné pour moi.

OriginalL'auteur Kerlos Aguero | 2016-01-23

L'espace entre .col blocs est mis en œuvre par le rembourrage en se Matérialiser. Donc, .col éléments sont utilisés pour la présentation.

Devrait juste place visuelle de Vos blocs pour enfants de .col éléments.

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>

OriginalL'auteur AntonAL

La meilleure façon est d'utiliser des classes fournies par le Matérialiser cadre, il nous offre une classe de 'décalage' 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>

OriginalL'auteur Aakash

0

Je pense que vous n'avez mis une colonne imbriquée. Qui permettra d'ajouter un rembourrage de .75rem chaque côté. Vous devriez mettre votre fond dans la colonne imbriquée.
Espérons que cela aide.

OriginalL'auteur Beto Aveiga

De Courant Materializecss version, 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 sera comme ci-dessous:
Matérialiser cadre de la marge entre les colonnes

Maintenant, supposons que vous ne voulez pas que le rembourrage puis vous devez ajouter style="padding:0"

OriginalL'auteur Henry

0

Aucune de ces réponses sont en fait de répondre à votre question. Je sais exactement ce que tu veux dire. Matérialiser (à la différence de Bootstrap) ne prennent pas en considération le fait que vous allez utiliser un en-tête ou le contenu de la zone avec une couleur unie, de sorte qu'il ne fournit pas "à la marge de l'espace" 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>
```
Qui permettrait de produire un solide espaces d'environ 15px entre chaque marge, quel que soit le nombre de colonnes que vous créez. Il se dégrade aussi bien.

Quand les autres disent de vous il suffit d'appliquer une couverture rembourrage solution, ils sont en oubliant que la colonne à droite de la page ont également un rembourrage et donc la ruine de la ligne de conteneurs sur le côté droit de la page.

Je suggère l'utilisation de @media queries en fonction du nombre de colonnes

S'il y a seulement deux colonnes, et puis vous pouvez définir padding-right sur TOUS les divs pour 15px, mais alors pour les @media query du grand écran, définissez nth-child(même) (tous les divs sur le côté droit de l'écran, avec un rembourrage de 0px;.

Garder à l'esprit ce fait encore la colonne de gauche 15pix diluant que la colonne de droite, et si vous avez uniforme de contenu, il sera perceptible.

En ce sens, Matérialisent a omis de fournir une bonne mise en page en colonnes blanches solution de l'espace (à l'aide de rembourrage au lieu de la marge globale d'espace) et Bootstrap est juste mieux dans ce domaine. Bonne chance à vous.

OriginalL'auteur Mindsect Team

-1

Essayer cette CSS

.col {
  padding:20px;
  box-sizing:border-box;
}

OriginalL'auteur Aziz

Vous devez vous connecter pour publier un commentaire.