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




css3 bootstrap-4 (3)

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

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 lorsqu'un formulaire est impliqué , mais ce n'est pas la situation ici. J'ai essayé cette solution , mais cela ne fonctionne pas lorsqu'il y a plusieurs colonnes qui se suivent.

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 rangée" de 3 colonnes et aucun en dessous de la "deuxième rangée" de 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 et aucun en dessous du dernier.

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


Utilisez les nouveaux utilitaires d’espacement Bootstrap 4. Par exemple, mb-3 ajoute la marge inférieure de 1rem .
Aucun CSS supplémentaire n'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>

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

Si vous souhaitez une solution CSS , utilisez la solution décrite dans la question 3.x correspondante (elle ne dépend pas 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 étranger à votre balisage car col-lg-4 col-md-4 ,
est identique à col-md-4 .


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 une margin-bottom sauf la dernière, puis sur un écran moyen, les lignes n'auront aucune marge et les colonnes auront toutes une marge inférieure sauf la dernière colonne de la dernière ligne

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







spacing