web-dev-qa-db-fra.com

Ajouter un espace vertical en utilisant Twitter Bootstrap?

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

Par exemple, supposons que je crée une page de destination et que je souhaite un peu (100 pixels) d’espaces vierges 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 avoir un moyen SEC d’ajouter des espaces vides verticalement.

twitter-bootstrapwhitespacevertical-alignmenttwitter-bootstrap-2
155
Ryan

Dans Bootstrap 4 , il y a espaces d'utilisation .

Citing la documentation pour la notation utilisée :

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs à xl, n'ont pas d'abréviation de point d'arrêt. En effet, ces classes sont appliquées à partir de min-width: 0 et versions ultérieures et ne sont donc pas liées par une requête multimédia. Les points d'arrêt restants incluent toutefois une abréviation de point d'arrêt.

Les classes sont nommées au format {property}{sides}-{size} pour xs et {property}{sides}-{breakpoint}-{size} pour sm, md, lg et xl.

Où propriété est l'un des éléments suivants:

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

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

  • t - pour les classes qui définissent margin-top ou padding-top
  • b - pour les classes qui définissent margin-bottom ou padding-bottom
  • l - pour les classes qui définissent margin-left ou padding-left
  • r - pour les classes qui définissent margin-right ou padding-right
  • x - pour les classes qui définissent à la fois *-left et *-right
  • y - pour les classes qui définissent à la fois *-top et *-bottom
  • blank - pour les classes qui définissent une margin ou padding sur les 4 côtés de l'élément

Où taille est l'un des éléments suivants:

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

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

32
vlp

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

51
jmdeldin

L'emballage fonctionne, mais quand vous voulez juste un espace, j'aime bien:

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

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

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

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

Il semble qu'environ 1 ligne sur un formulaire représente environ 50 pixels (47 pixels sur l'élément que je viens d'inspecter). C'est une forme horizontale, avec l'étiquette à gauche 2col et l'entrée à droite 10col. Donc, vos pixels peuvent varier.

Étant donné que le mien mesure 50 pixels de haut, je créerais un écarteur de 50 pixels de haut sans marges ni rembourrages;

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

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

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

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

Un panel, un well et un form-group fournissent tous un certain espacement vertical.

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

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

21
ErichBSchulz

J'ai simplement créé une classe div en utilisant différentes hauteurs, c'est-à-dire.

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

Il suffit de créer une classe de séparation pour toutes les hauteurs nécessaires.

8
user5593012

Mon tour Pas élégant, mais ça marche:

<p>&nbsp;</p>
7
asiniy

Il suffit d'utiliser <br/>. Je me suis retrouvé ici à chercher la réponse à cette question, puis je me suis senti ridicule de ne pas penser à utiliser un simple saut de ligne, comme suggéré par l'utilisateur JayKilleen dans un commentaire.

5
adjenks

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

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

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

4
John Erck

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

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

puis

<div class="divider"></div>
3
Sanjeev
<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

1
Den