web-dev-qa-db-fra.com

Bootstrap 3 - Marge supérieure de colonne sur des écrans plus petits

J'ai une ligne avec X colonnes possibles.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

Maintenant, j'aimerais ajouter margin-top:20px à toutes les colonnes de petit écran et la même marge pour les colonnes de grand écran, s'il y en a plus de 4 car cela entraînerait l'affichage de deux "lignes" et exigerait donc un espace entre elles.

Est-ce possible d'une manière ou d'une autre avec seulement l'utilisation de CSS?

csscss3twitter-bootstraptwitter-bootstrap-3media-queries
17
n00b

Vous pouvez utiliser une requête multimédia pour chaque fois que vous voulez la marge supérieure.

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

http://www.bootply.com/126007

P.S. - Il n'y a rien de mal à avoir le total de .col-* dans un .row supérieur à 12 (c'est-à-dire: http://getbootstrap.com/css/#grid-example-mixed ). Cela provoque simplement un enveloppement. Il existe plusieurs exemples dans les documents qui utilisent cette technique. Ce n'est généralement pas idéal pour les lignes imbriquées.

29
Zim

J'avais besoin de quelque chose de similaire et voici la solution que j'ai proposée. La documenter pour les futurs lecteurs (et moi-même)

$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $res-abbr, $res-vals in $res-list{
    @media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
      @each $dir-abbr, $dir-name in $dir-list{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$res-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

Ce code SASS génère des classes comme suit: 

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

L'éditeur de contenu peut donc utiliser .mt-xs-10 pour appliquer margin-top: 10px à un élément donné sur l'écran extra-small.

J'espère que ça aide quelqu'un.

5
Ejaz

Ceci est un ancien post mais ci-dessous est une solution propre.

[class*="col-"] {
  margin-bottom: 15px;
}

Cela fonctionne bien dans certaines situations, mais ajoute une marge supplémentaire inutile lorsque cela n'est pas nécessaire ..__ Pour résoudre ce problème, nous pouvons créer une nouvelle classe CSS qui applique la marge supérieure aux colonnes lorsqu'elles sont empilées. Je crée une classe nommée .row-grid 

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 0;
  }
}
2
Muhammad Tanweer

J'utilise cette solution simple et propre:

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

De cette manière, chaque <div class='col-*-*'> a une marge de 15 pixels sur le dessus, sauf sur la première ligne (ou sur mobile, sauf sur le haut).

0
Marco Panichi