Ajouter des espaces verticaux à l'aide de Twitter Bootstrap ?

Question

Quelle est la meilleure façon d'ajouter des espaces blancs verticaux à l'aide de Bootstrap de Twitter ?

Par exemple, disons que je crée une page de renvoi et que j'aimerais avoir un peu (100px) d'espace blanc au-dessus et au-dessous d'un certain bouton. Évidemment, je pourrais créer une certaine classe pour ce bouton particulier. Mais je pense que Bootstrap devrait disposer d'une classe SEC manière d'ajouter des espaces vides verticaux.

Answer 1

Dans la version 2, il n'y a rien d'intégré pour un espace vertical aussi important, vous devrez donc utiliser une classe personnalisée. Pour de plus petites hauteurs, je lance généralement une classe <div class="control-group"> autour d'un bouton.

Answer 2

L'emballage fonctionne mais quand on veut juste un espace, j'aime bien :

<div class="col-xs-12" style="height:50px;"></div>

Answer 3

Sur Bootstrap 4/5 il existe des utilitaires d'espacement ( BS4 , BS5 ).

Extrait de la documentation :

Utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs a xl , ne comportent pas d'abréviation de point d'arrêt. Cela est dû au fait que ces classes sont appliquées à partir de min-width: 0 et plus, et ne sont donc pas liés par un protocole d'accord. requête média. Les autres points d'arrêt comprennent toutefois une abréviation de point d'arrêt.

Les classes sont nommées en utilisant le format {property}{sides}-{size} para xs et {property}{sides}-{breakpoint}-{size} para sm , md , lg et xl .

Où propriété est l'un d'entre eux :

• m - pour les classes qui fixent margin
• p - pour les classes qui fixent padding

Où côtés est un des ( Veuillez noter les différences entre le BS4 et le BS5 ) :

• t - pour les classes qui fixent margin-top o padding-top
• b - pour les classes qui fixent margin-bottom o padding-bottom
• l - pour les classes qui fixent margin-left o padding-left (Bootstrap 4)
• s - pour les classes qui fixent margin-left o padding-left (Bootstrap 5)
• r - pour les classes qui fixent margin-right o padding-right (Bootstrap 4)
• e - pour les classes qui fixent margin-right o padding-right (Bootstrap 5)
• x - pour les classes qui définissent à la fois *-left y *-right
• y - pour les classes qui définissent à la fois *-top y *-bottom
• blank - pour les classes qui définissent un margin o padding sur les 4 côtés de l'élément

Où taille est l'un d'entre eux :

• 0 - pour les classes qui éliminent la marge ou le padding en le fixant à 0
• 1 - (par défaut) pour les classes qui définissent l'option margin o padding a $spacer * .25
• 2 - (par défaut) pour les classes qui définissent l'option margin o padding a $spacer * .5
• 3 - (par défaut) pour les classes qui définissent l'option margin o padding a $spacer
• 4 - (par défaut) pour les classes qui définissent l'option margin o padding a $spacer * 1.5
• 5 - (par défaut) pour les classes qui définissent l'option margin o padding a $spacer * 3

---

Ainsi, pour disposer d'un espace vertical supplémentaire au-dessus et au-dessous d'un élément, vous utiliserez l'option suivante my-5 classe.

Answer 4

Désolé de creuser une vieille tombe ici, mais pourquoi ne pas simplement faire ça ?

<div class="form-group">
    &nbsp;
</div>

Il ajoutera un espace de la hauteur d'un élément de formulaire normal.

Il semble qu'une ligne d'un formulaire fasse environ 50px (47px sur mon élément que je viens d'inspecter). Il s'agit d'un formulaire horizontal, avec une étiquette à gauche de 2 colonnes et une entrée à droite de 10 colonnes. Vos pixels peuvent donc varier.

Puisque le mien est essentiellement de 50px, je créerais un espaceur de 50px de haut sans marges ni rembourrage ;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

Answer 5

Je sais que c'est vieux, mais je suis venu ici en cherchant la même chose, j'ai trouvé que Bootstrap a le bloc d'aide, très pratique pour ces situations :

<div class="help-block"></div>