web-dev-qa-db-fra.com

Ajouter un espacement entre les colonnes empilées verticalement dans Bootstrap 4

Malheureusement, il ne semble pas être un bon moyen de gérer l'espacement vertical entre les colonnes qui passent d'une pile horizontale à une pile verticale à certains points d'arrêt. Il semble y avoir une solution quand un formulaire est impliqué , mais ce n'est pas la situation ici. J'ai essayé cette solution , mais cela ne fonctionne pas quand plusieurs colonnes sont encapsulées. 

Pour illustrer mon scénario, voici la structure de mon 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/

Pour les périphériques de taille moyenne (md) et au-dessus, j'aimerais qu'il y ait un espacement entre les deux "rangées" de colonnes, mais aucun espacement au-dessus de la "première ligne" de 3 colonnes et aucun en dessous de la "deuxième rangée" 3 colonnes. Lorsque les colonnes s'empilent verticalement au-dessous de la taille de périphérique moyenne (md), j'aimerais qu'il y ait un espacement entre chacune des colonnes, mais aucun au-dessus du premier enfant ni aucun en dessous du dernier.

Idéalement, la solution fonctionnerait quel que soit le nombre de colonnes (par exemple 3, 5, 6, 12) contenues dans la ligne.

html5css3bootstrap-4twitter-bootstrap-4spacing
6
keruilin

Voici comment j'ai fini par réussir 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;
   }
}
0
keruilin

Utilisez les nouveaux utilitaires Bootstrap 4 spacing . Par exemple, mb-3 ajoute la marge inférieure de 1rem.
Aucun CSS supplémentaire n'est requis.

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>

Les utilitaires d'espacement étant réactifs, vous pouvez les appliquer à des points d'arrêt spécifiques (par exemple, mb-0 mb-md-3).

Si vous voulez une solution CSS, utilisez la solution expliquée dans la question 3.x correspondante (c'est pas dépendant 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 identique à col-md-4.

25
Zim

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;
  }
}
0
user1263663

voir l'extrait ci-dessous ou jsfiddle

cela fonctionnera quel que soit le nombre de colonnes ou de rangées

d'abord (sur grand écran) toutes les lignes ont margin-bottom sauf le dernier puis sur écran moyen, les lignes n'auront aucune marge et les colonnes auront toutes le bas de la marge sauf le dernier col le dernière rangée

.row {
	margin-bottom:30px;
}
.row:last-child{
	margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
	.row { 
	margin:0
	}
	.row [class*="col-"]  {
		margin-bottom:30px;
	}
	.row:last-child [class*="col-"]:last-child{
		margin-bottom:0;
	}
}
<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

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

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

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

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

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

    </div>

  </div>

</body>

0
Mihai T