Ajouter un espacement entre empilés à la verticale des colonnes dans le Bootstrap 4

Malheureusement, il ne semble pas être une bonne façon de gérer l'espacement vertical entre les colonnes de la transition à partir d'une horizontale de la pile une pile verticale à certains points d'arrêt. Il ne semble pas être un solution lorsqu'un formulaire est impliqué, mais ce n'est pas le cas ici. J'ai essayé cette solution, mais il ne fonctionne pas quand il y a plusieurs colonnes que les envelopper dans une rangée.

Pour illustrer mon scénario, voici la structure de mon code HTML:

<body>

  <div class="container">

    <div class="row">

      <div class="col-md-4">
        col 1
      </div>

      <div class="col-md-4">
        col 2
      </div>

      <div class="col-md-4">
        col 3
      </div>

      <div class="col-md-4">
        col 4
      </div>

      <div class="col-md-4">
        col 5
      </div>

      <div class="col-md-4">
        col 6
      </div>

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

Au moyen de l'appareil de la taille (md) et au-dessus, j'aimerais qu'il y a là, à l'espacement entre les deux "lignes" de colonnes, mais pas d'espace au-dessus de la "première ligne" de 3 colonnes et aucun au-dessous de la "deuxième ligne" de 3 colonnes. Lorsque les colonnes de la pile à la verticale au-dessous de la moyenne-la taille de l'instrument (md), j'aimerais y être espacement entre chacune des colonnes, mais aucun au-dessus du premier enfant et aucun au-dessous du dernier enfant.

Idéalement, la solution serait de travailler indépendamment du nombre de colonnes (par exemple, 3, 5, 6, 12) sont contenues à l'intérieur de la ligne.

je ne pense pas que vous pouvez le faire. vous devriez essayer de diviser en 2 lignes et ensuite vous pouvez l'obtenir fait
ok, alors je vous encourage à proposer, comme solution...semble certainement comme l'un

OriginalL'auteur keruilin | 2017-04-04

Utiliser le nouveau Bootstrap 4 l'espacement des utilitaires. Par exemple mb-3 ajoute margin-bottom de 1rem.
Sans supplément de CSS est nécessaire.

http://www.codeply.com/go/ECnbgvs9Ez

<div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>

L'espacement utils sont adaptés de sorte que vous pouvez les appliquer pour certains points d'arrêt (c'est à dire; mb-0 mb-md-3)

Si vous voulez un CSS solution, utilisez le solution expliqué dans le 3.x question (c'est
pas dépend de l'utilisation d'un formulaire): https://jsfiddle.net/zdLy6jb1/2/

/* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}

Remarque: le col-lg-4 est superflu dans votre balisage depuis col-lg-4 col-md-4,
est le même que col-md-4.

OriginalL'auteur Zim

Voici comment j'ai fini par faire ce travail:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

OriginalL'auteur keruilin

J'ai fini avec cette solution:

@include media-breakpoint-down(xs) {
  [class*="col-sm"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(sm) {
  [class*="col-md"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(md) {
  [class*="col-lg"]:not(:last-child){
    margin-bottom: 15px;
  }
}

OriginalL'auteur user1263663

Vous devez vous connecter pour publier un commentaire.