Espace vertical lors de l’emstackment de colonnes dans Bootstrap 3

Une façon serait avec CSS qui ajoute margin-bottom à col-* sur des périphériques / largeurs plus petites.

 @media (max-width: 768px) { [class*="col-"] { margin-bottom: 15px; } } 

Une autre façon consiste à append un div qui n’est visible que sur les petits appareils / largeurs.

  
 
 
 ... 

Démo: http://bootply.com/92276

Mise à jour 2018

Bootstrap 4 a maintenant des utilitaires d’espacement qui peuvent être utilisés.

Utiliser le .form-group sur les colonnes

C’est la façon bootstrap. D’autres hacks CSS mentionnés peuvent fonctionner, mais ne sont pas le moyen prévu pour obtenir ce que vous voulez. Hacking bootstraps CSS peut conduire à plus de travail plus tard lors du changement de votre version bootstrap.

Exemple de démarrage: http://www.bootply.com/4cXfQkTCAm#

Je voulais le faire fonctionner quand mes colonnes s’emstacknt à moins de 991px et affectent tout sauf le premier enfant alors je mets

 @media (max-width: 991px) { [class*="col-"]:not(:first-child){ margin-top: 40px; } } 

Un simple Bootstrap4, pas de CSS, de hacks ou de solution de mixin supplémentaires serait quelque chose comme:

 
 
 .... 
 
 .... 
  

Cela ajoute une marge inférieure (mb-3) mais la met à zéro lorsqu’elle n’est pas empilée (mb-md-0).

Etant donné que les requêtes de média pour les utilitaires d’espacement tels que “mb-3” s’appliquent à “tout ce qui est supérieur” (min-width), vous devez effectuer l’oppsite et le réinitialiser à 0 (mb-XX-0). Dans ce cas, nous le configurons pour emstackr sous “md” (sm), nous définissons donc la marge 0 à ce point d’arrêt.

Voici un fork de votre jsfiddle pour inclure la marge uniquement sur mobile. Les styles “mb-3 mb-md-0” sur les colonnes indiquent la solution proposée. (Version de Jsfiddle ici: http://jsfiddle.net/cb9oc064/10/ )

 @import url('https://getbootstrap.com/dist/css/bootstrap.css'); 

 
 
 
 
 
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 
 
  
 
  
 
 
 
 
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 
 
 Push me  
 
  
 
 
 
 
  

Regardez cet exemple http://getbootstrap.com/examples/carousel/ empilé Il y a une marge entre le texte et l’image 500 * 500. Ceci est dû au fait que le texte est

autour de lui et que sa marge d’ajout est inférieure à 20px

Ajouter une marge supérieure négative à chaque ligne et contrer cette marge sur chaque colonne, comme ceci:

 .row { margin-top: -10px; } [class^='col'], [class*=' col'] { margin-top: 10px; } 

Une fois les colonnes empilées, elles obtiennent la marge verticale entre elles.

Fonctionne sur toutes les tailles d’écran.

Essayez d’utiliser span au lieu de div avec les classes bootstrap.