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


162

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.

Réponses:


39

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

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.


3
Pouvez-vous donner un exemple de chaîne de classe valide?
Kolob Canyon

Agréable! C'est bien.
Tiki

51

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.


8
ou <div class = "btn-toolbar">
dyurkavets

9
Merci. J'ai maintenant créé des classes spacer10, spacer50, etc. pour cette utilisation. Je vois qu'il y a déjà une demande de fonctionnalité dans github pour cela: bit.ly/R9oap9
Ryan

1
@Ryan: Bien, je n'ai pas vu la pull request. Je suis un peu en conflit avec cela. Bootstrap est presque entièrement de présentation (et pratique), mais si vous louchez assez fort pour ignorer tout le HTML supplémentaire, vous pouvez en tirer une sémantique. L'espacement vertical est purement de présentation, donc je pense qu'il est préférable de le faire avec une classe / un ID personnalisé.
jmdeldin

2
C'était pour la v2, mais il semble que la v3 ait minimisé l'espacement .btn-toolbar, vous devriez donc simplement ajouter une nouvelle classe avec vos propres marges.
jmdeldin

3
Apparemment, la demande de fonctionnalité github a été fermée et la fonctionnalité peut être intégrée à Bootstrap v4. bit.ly/R9oap9
Ryan

48

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

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

16
L'ajout d'un style en ligne lorsque vous travaillez avec Bootstrap n'est généralement pas une bonne idée. Il devrait au moins entrer dans CSS.
alexykot

2
notez que "col-xs-12" est exactement la même chose que de ne pas avoir de cours du tout
Soldeplata Saketos

34

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>

1
Cela ajoute de l'espace sous le groupe mais pas au
icc97

Bien sûr, c'est exactement ce qu'il a demandé, un moyen d'ajouter un espace vide vertical. Si vous avez besoin d'un groupe de formulaires personnalisé, d'une ligne ou même d'un bouton, créez votre propre classe à ajouter, en remplaçant les marges. Ie: class = "form-group spaced-group" et ".spaced-group {margin-top: 15px! Important; margin-bottom: 15px! Important;}. .. C'est juste du bon sens css.
Wade

L'OP a spécifiquement demandé: "un peu (100px) d'espace blanc au - dessus et en dessous d'un certain bouton"
icc97

1
Non, c'était un exemple, pas sa question. Sa question était "Quelle est la meilleure façon d'ajouter un espace vide vertical à l'aide du Bootstrap de Twitter?" - un espace vide vertical est différent d'une marge sur un élément spécifique. S'il le faisait pour tous les boutons, il pouvait changer la marge de btn ou créer sa propre classe comme "btn-spaced" avec les marges souhaitées. S'il veut juste un moyen d'ajouter un espace là où il le souhaite, une entretoise d'une hauteur fixe comme je l'ai répondu est ce dont il a besoin. Il a posé une question et a donné l'exemple d'une autre. J'ai supposé qu'il connaissait suffisamment CSS pour savoir qu'il pouvait passer outre les marges.
Wade

Puisqu'il a dit une méthode DRY, et un bouton, je créerais alors une classe de bouton avec les marges que je voulais: btn-spaced. S'il n'y avait pas que des boutons, une marge générale s'appliquerait aux lignes, aux groupes de formulaires, peu importe. Comme class = "row space-small" ou class = "form-group space-medium" .. Où petit moyen et grand ne sont que des variantes des marges, et pourraient s'appliquer à pratiquement n'importe quoi. - difficile de dire ce que veut l'op. Pour les boutons uniquement ou pour n'importe quel élément.
Wade

24

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>

21

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


5
.form-group semble le meilleur choix car le css est limité à margin-bottom: 15px. .well et .panel ne doivent pas être utilisés si vous souhaitez simplement ajouter un espacement car ils ont d'autres attributs (tels que l'arrière-plan, le remplissage, la bordure, etc.)
xaa

9

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.


8

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

<p>&nbsp;</p>

2
@JayKilleen +1 Vous devriez poster cela comme réponse. Peut-être que les gens deviennent de plus en plus dépendants des cadres et ont commencé à oublier les bases.
ADJenks

5

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.


L'inconvénient est que vous n'obtenez pas un contrôle exact de 100 pixels, mais cela devrait certainement fonctionner pour ajouter une quantité d'espace raisonnable.
mix3d

1
@ mix3d, vous êtes là, je n'ai pas remarqué au début qu'il se souciait que ce soit exactement 100px. Je pensais qu'il voulait juste un "peu". Il pourrait certainement créer sa propre classe d'aide comme tout le monde l'a suggéré. Mais comme cet article a tant d'années, il pourrait maintenant simplement passer à bootstrap 4 pour un espacement précis, ou en retirer les classes d'assistance.
ADJenks

5

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>

4

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 .


Merci et votre suggestion fonctionnerait avec ou sans Bootstrap. Mais la question portait spécifiquement sur l'utilisation de Twitter Bootstrap pour ajouter l'espacement.
Jonathan

1
<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
En quoi est-ce une réponse à la question?
Matt S

Il ajoute un espacement vertical comme l'a demandé l'affiche originale, et les développeurs de bootstrap le prennent désormais en charge dans la dernière version (4) en version bêta. C'est en fait la bonne réponse et si vous recherchez l'espacement vertical dans le bootstrap, vous verriez qu'il n'a pas été pris en compte auparavant. Veuillez ne pas rejeter les choses que vous n'avez pas testées ou recherchées sur Google.
Den

Vous n'avez clairement pas lu la question. "Je voudrais un peu (100px) d'espace blanc vide au-dessus et en dessous d'un certain bouton." Un certain bouton ... un certain bouton ...
Matt S

1
Avant cela, il a dit: "Par exemple, disons". Ce n'était qu'un exemple, ce n'était pas le problème spécifique. Ne citez pas hors contexte. L'exemple que j'ai fourni est vaste et toutes les informations que j'ai données sont adéquates.
Den

-3

Il n'y a rien de plus sec que

.btn {
    margin-bottom:5px;
}

13
Je recommande de ne pas modifier le style des classes css bootstrap de base.
James Palawaga

1
@JamesPalawaga +1. Mais si cela devait être une norme générale dans votre application, vous pourriez remplacer le style bootstrap, en utilisant LESS et des variables et / ou des feuilles de style de remplacement soigneusement gérées.
Jonathan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.