Ajouter un espace vertical à l'aide de Twitter Bootstrap?

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

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

Dans Bootstrap 4, il existe des utilitaires d'espacement .

Citant la documentation de la notation utilisée :

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xsà xl, ne contiennent aucune abréviation de point d'arrêt. En effet, ces classes sont appliquées de min-width: 0et vers le haut et ne sont donc pas liées par une requête multimédia. Cependant, les points d'arrêt restants incluent une abréviation de point d'arrêt.

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

Où la propriété est l'un des:

• m - pour les classes qui définissent margin
• p - pour les classes qui définissent padding

Où côtés est l'un des:

• t- pour les classes qui définissent margin-topoupadding-top
• b- pour les classes qui définissent margin-bottomoupadding-bottom
• l- pour les classes qui définissent margin-leftoupadding-left
• r- pour les classes qui définissent margin-rightoupadding-right
• x- pour les classes qui définissent à la fois *-leftet*-right
• y- pour les classes qui définissent à la fois *-topet*-bottom
• vide - pour les classes qui définissent un marginou paddingsur les 4 côtés de l'élément

Où la taille est l'une des suivantes:

• 0 - pour les classes qui éliminent la marge ou le remplissage en le définissant sur 0
• 1- (par défaut) pour les classes qui définissent marginou paddingsur$spacer * .25
• 2- (par défaut) pour les classes qui définissent marginou paddingsur$spacer * .5
• 3- (par défaut) pour les classes qui définissent marginou paddingsur$spacer
• 4- (par défaut) pour les classes qui définissent marginou paddingsur$spacer * 1.5
• 5- (par défaut) pour les classes qui définissent marginou paddingsur$spacer * 3

Donc, pour avoir un espace vertical supplémentaire au-dessus et en dessous d'un élément, vous utiliseriez my-5class.

Dans la v2, il n'y a rien de intégré pour autant d'espace vertical, vous voudrez donc vous en tenir à une classe personnalisée. Pour les plus petites hauteurs, je lance généralement <div class="control-group">un bouton autour d'un bouton.

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

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

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

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

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

Il semble qu'environ 1 ligne sur un formulaire fait environ 50px (47px sur mon élément que je viens d'inspecter). Il s'agit d'une forme horizontale, avec étiquette à gauche 2col et entrée à droite 10col. Ainsi, vos pixels peuvent varier.

Puisque le mien est fondamentalement 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>

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

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

Pour la version 3, il ne semble pas y avoir de moyen «bootstrap» pour y parvenir proprement.

A panel, a wellet a form-groupfournissent tous un espacement vertical.

Une solution d'espacement vertical spécifique plus formelle est, apparemment, sur la feuille de route pour bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

J'ai simplement créé une classe div en utilisant différentes hauteurs ie

<div class="divider-10"></div>

Le CSS est:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Créez simplement une classe de séparation pour toutes les hauteurs nécessaires.

Mon truc. Pas élégant, mais ça marche:

<p>&nbsp;</p>

Utilisez simplement <br/>. Je me suis retrouvé ici à la recherche de la réponse à cette question, puis je me suis senti un peu idiot de ne pas avoir pensé à utiliser un simple saut de ligne comme suggéré par l'utilisateur JayKilleen dans un commentaire.

Je sais que c'est vieux et qu'il y a plusieurs bonnes solutions déjà publiées, mais une solution simple qui a fonctionné pour moi est le CSS suivant

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

puis créez un div dans votre html

<div class="divider"></div>

J'ai essayé d'utiliser <div class="control-group">et cela n'a pas changé ma mise en page. Il n'ajoutait pas d'espace vertical. La solution qui a fonctionné pour moi était:

<ol style="visibility:hidden;"></ol>

Si cela ne vous donne pas suffisamment d'espace vertical, vous pouvez en obtenir davantage en ajoutant des <li>&nbsp;</li>balises imbriquées .

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

Il n'y a rien de plus sec que

.btn {
    margin-bottom:5px;
}