Ajouter verticale de l'espace à l'aide de Twitter Bootstrap?

Quelle est la meilleure façon d'ajouter de la verticale de l'espace à l'aide de Twitter Bootstrap?

Par exemple, disons que je suis entrain de créer une page d'atterrissage et aimerait un peu (100px) de l'espace vide au-dessus et en dessous d'un certain bouton. Évidemment, je pourrais créer une certaine classe pour ce bouton. Mais, je pense que Bootstrap doit avoir un SEC moyen d'ajouter à la verticale dans des espaces vides.

InformationsquelleAutor Ryan | 2012-09-05

30

Dans Bootstrap 4 il y a l'espacement des utilitaires.

Citant la documentation pour la notation:
Espacement des utilitaires qui s'appliquent à tous les points d'arrêt, de xs à xl,
n'ont aucun point d'arrêt abréviation en eux. C'est parce que ces classes
sont appliqués à partir min-width: 0 et en haut, et ne sont donc pas liés par un
requête de média. Le reste des points d'arrêt, cependant, ne comprennent
point d'arrêt de l'abréviation.

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

Où 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-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 les deux *-left et *-right
- y - pour les classes qui définissent les deux *-top et *-bottom
- vide - pour les classes qui margin ou padding sur les 4 côtés de l'élément
Où taille est l'un des:
- 0 - pour les classes d'éliminer la marge ou le rembourrage en le définissant par 0
- 1 - (par défaut) pour les classes qui définissent la margin ou padding à $spacer * .25
- 2 - (par défaut) pour les classes qui définissent la margin ou padding à $spacer * .5
- 3 - (par défaut) pour les classes qui définissent la margin ou padding à $spacer
- 4 - (par défaut) pour les classes qui définissent la margin ou padding à $spacer * 1.5
- 5 - (par défaut) pour les classes qui définissent la margin ou padding à $spacer * 3
De sorte à avoir des supplémentaires de l'espace vertical au-dessus et en dessous d'un élément, vous utilisez my-5 classe.
- Bootstrap 4 est tellement beau à travailler avec :')
- Pourriez-vous nous donner un exemple d'un permis de la classe string?
- Nice! Ce qui est excellent.
InformationsquelleAutor vlp
51

Dans la v2, il n'y a pas de quoi construit-en pour autant de l'espace vertical, de sorte que vous aurez envie de rester avec une classe personnalisée. Pour les petites hauteurs, j'ai l'habitude de simplement jeter un <div class="control-group"> autour d'un bouton.
- ou <div class="btn-barre d'outils">
- Merci. J'ai maintenant créé certaines spacer10, spacer50, les classes etc pour cette utilisation. Je vois qu'il ya une demande de fonctionnalité dans github pour ce déjà: bit.ly/R9oap9
- Nice, n'a pas vu la demande d'extraction. Je suis un peu en conflit par elle. Bootstrap est presque entièrement de présentation (et pratique), mais si vous plissez les yeux assez difficile à ignorer tout le HTML, vous pouvez dériver de la sémantique à partir d'elle. L'espacement Vertical est purement de présentation, donc je pense que c'est mieux fait avec une classe personnalisée/ID.
- Aussi, une chose que vous voudrez peut-être regarder dans l'aide de @extend dans votre SCSS (ou quelque chose de comparable en MOINS) pour éviter de salir votre HTML avec Bootstrap classes spécifiques.
- il est bon d'ajouter un css de la balise comme ceci style="margin-right:10px;" parce que bootstrap n'ont pas une bonne façon d'ajouter de l'espace vertical spécialement pour les boutons
- J'espère que vous vous moquez -- styles en ligne devrait vraiment être évité, surtout si vous allez dupliquer ensemble de l'application. Si vous avez besoin de personnaliser un élément, juste @extend dans SCSS ou d'appliquer une nouvelle classe.
- oui je suis d'accord avec votre idée que c'est la meilleure façon de le faire
- OP & @dyurkavets cela ne semble pas fonctionner dans la v3, c'est pour de la v2?
- C'était pour la v2, mais il semble que la v3, on a réduit l'espacement autour de .btn-toolbar, de sorte que vous devez juste ajouter une nouvelle classe avec vos propres marges.
- Apparemment, le github demande de fonctionnalité a été fermée et la fonctionnalité peut le faire pour Bootstrap v4. bit.ly/R9oap9
- Maintenant que Bootstrap 4 est disponible, il semble qu'ils ont intégré l'entretoise de classes. Voir la maintenant vérifié réponse par @vlp
- Merci pour la mise à jour @Ryan. Je ne suis pas sûr de ce que l'on étiquette est pour la division des questions et des réponses basées sur les versions, mais je pense que vous devriez préciser la version de votre question. C'est assez déroutant d'avoir des réponses pour de multiples versions (mais pas étiqueté pour la version), comme il l'a fait six ans maintenant (!) depuis l'origine a été demandé et répondu. J'ai juste ajouté "v2" de mon ancienne réponse pour les futurs voyageurs dans le temps.
InformationsquelleAutor jmdeldin
46

Emballage fonctionne mais quand vous voulez juste un espace, comme je les aime:
```
<div class="col-xs-12" style="height:50px;"></div>
```
- Ajout d'un style en ligne lorsque vous travaillez avec Bootstrap est généralement pas une bonne idée. Il devrait au moins aller en CSS.
- notez que "col-xs-12", c'est exactement le même comme n'ayant pas de classes à tous
InformationsquelleAutor hidden-username
33

Désolé pour creuser une vieille tombe ici, mais pourquoi ne pas le faire?
```
<div class="form-group">
    &nbsp;
</div>
```
Il va ajouter un espace à la hauteur d'un élément de formulaire.

Il semble sur 1 ligne sur un formulaire est à peu près 50px (47px sur mon élément je viens de inspectés). C'est une forme horizontale, avec une étiquette sur la gauche 2col et l'entrée sur la droite 10col. Si votre pixels peuvent varier.

Depuis que le mien est fondamentalement 50px, je voudrais créer une entretoise de 50px de haut avec pas de marges ou de rembourrage;
```
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
```
- Cela ajoute de l'espace ci-dessous groupe, mais pas au-dessus de
- Bien sûr, il le fait, c'est exactement ce qu'il a demandé, une façon d'ajouter une verticale de l'espace vide. Si vous avez besoin de formulaire personnalisé-groupe ou de la ligne ou même un bouton, faire votre propre classe pour ajouter à cela, en substituant les marges. C'est à dire: class="form-group espacés-groupe" et ".interligne-groupe { margin-top: 15px !important; margin-bottom: 15px !important; }. .. C'est juste du bon css-sens.
- L'OP spécifiquement demandé: "un peu (100px) de l'espace blanc au-dessus et en dessous d'un certain bouton"
- Non, c'était un exemple, pas à sa question. Sa question était "Quelle est la meilleure façon d'ajouter de la verticale de l'espace vide à l'aide de Twitter Bootstrap?" - une verticale de l'espace vide est différent de celui d'une marge sur un élément spécifique. Si il l'a fait pour tous les boutons qu'il pourrait changer la marge de btn ou de faire sa propre classe comme "btn-interligne" avec sa marge. Si il veut juste un moyen pour ajouter un fossé où il veut, d'une entretoise d'une hauteur fixe comme j'ai répondu est ce dont il a besoin. Il a posé une question, et a donné un exemple d'une autre. Je suppose qu'il savait CSS suffisamment pour savoir qu'il ne l'emportent sur les marges.
- Depuis, il a dit une méthode à SEC, et le bouton, puis je voudrais créer un bouton de classe avec les marges que je voulais: btn-espacées. Si ce n'était pas seulement les boutons général de marge applicables aux lignes de la forme de groupes, que ce soit. Comme class="row espace-petit" ou class="form-group de l'espace-moyen".. Où les petites, moyennes et grandes sont que les variantes de la marge, et pourrait être appliquée à pratiquement rien. - difficile de dire qui l'op veut. Pour les boutons ou tout simplement que pour tout élément..
- Désolé, mon mal, je ne savais pas que vous vouliez dire, à ajouter ce bloc de code HTML. J'ai lu ce que vous disiez à juste utiliser le form-group classe autour de ce que jamais l'élément d'espacement. Mais ce que vous êtes suggère, c'est de mettre cette div élément ci-dessus et ci-dessous pour créer de l'espace.
- Il fonctionne pour moi. Thx 🙂
InformationsquelleAutor Wade
22

Je sais que c'est vieux, mais je suis venu ici à la recherche de la même chose, j'ai trouvé que Bootstrap a l'aide de bloc, très pratique pour ces situations:
```
<div class="help-block"></div>
```
InformationsquelleAutor Cross
21

Pour la version 3, il ne semble pas y avoir de "bootstrap" façon d'atteindre cet objectif d'une manière ordonnée.

Un panel, un well et un form-group tous fournissent de l'espacement vertical.

Plus formelles spécifiques espacement vertical solution 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
- .formulaire-groupe semble le meilleur choix que le css est limitée à margin-bottom:15px. .bien et .panneau ne doit pas être utilisé si vous souhaitez simplement ajouter quelques espacement ils ont d'autres attributs (comme l'arrière-plan, padding, border, etc)
InformationsquelleAutor ErichBSchulz
8

J'ai simplement créé une div de classe à l'aide de 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 un diviseur de classe pour ce que jamais hauteurs sont nécessaires.

InformationsquelleAutor user5593012
7

Mon truc. Pas très élégant, mais il fonctionne:
```
<p>&nbsp;</p>
```
- ou <br> ?? ou est-il quelque chose de mal avec <br>??
- Vous devriez poster que comme une réponse. Peut-être que les gens sont de plus à compter que sur la cadres et ont commencé à oublier l'essentiel.
InformationsquelleAutor asiniy
4

J'ai essayé d'utiliser <div class="control-group"> et il n'a pas changé ma mise en page. Il n'a pas à ajouter de l'espace vertical. La solution qui a fonctionné pour moi a été:
```
<ol style="visibility:hidden;"></ol>
```
Si cela ne vous donne pas suffisamment d'espace vertical, vous pouvez progressivement obtenir plus de par l'ajout de imbriquée <li> </li> balises.
- Merci, et votre suggestion serait de travailler avec ou sans Bootstrap. Mais la question a été spécifiquement sur l'utilisation de Twitter Bootstrap pour ajouter de l'espacement.
InformationsquelleAutor John Erck
4

Suffit d'utiliser <br/>. Je me suis retrouvé ici à la recherche de la réponse à cette question et puis sentir sorte de bête pour ne pas penser à l'aide d'un simple saut de ligne comme suggéré par l'utilisateur JayKilleen dans un commentaire.
- Inconvénient est que vous n'obtenez pas exact 100px de contrôle, mais il devrait certainement travailler à ajouter une quantité raisonnable de l'espace.
- vous êtes là, je n'avais pas remarqué au premier abord qu'il s'en souciait être exactement 100px. Je pensais qu'il voulait juste un "peu". Il pourrait certainement faire sa propre helper de la classe comme tout le monde l'a suggéré. Mais depuis ce post est donc de nombreuses années, il pouvait maintenant juste la mise à niveau vers bootstrap 4 pour un espacement précis, ou de prendre le helper classes.
InformationsquelleAutor adjenks
3

Je sais que c'est vieux et il y a plusieurs bonnes solutions déjà posté, mais d'une solution simple qui a fonctionné pour moi
```
<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>
```
et puis
```
<div class="divider"></div>
```
InformationsquelleAutor Sanjeev
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
- Comment est-ce une réponse à la question?
- Il ajoute espacement vertical que l'affiche originale a demandé, également bootstrap devs sont maintenant des services de traiteur pour elle dans la dernière version (4) dans la version bêta de l'état. C'est en fait la bonne réponse et si vous google espacement vertical dans le bootstrap, vous verriez qu'il n'a pas été pris en compte auparavant. Merci de ne pas downvote des choses que vous n'avez pas testé ou googlé.
- De toute évidence, vous n'avez pas lu la question. "Je voudrais un peu (100px) de l'espace blanc au-dessus et en dessous d'un certain bouton." Un bouton de certaines... un bouton de certaines...
- Avant cela, il a dit: "Par exemple, disons". C'était juste un exemple, il n'était pas le problème spécifique. Ne pas citer hors contexte. L'exemple que j'ai fourni est ample et toutes les infos que j'ai donné est suffisante.
InformationsquelleAutor Den
-3

Il n'y a rien de plus SEC que
```
.btn {
    margin-bottom:5px;
}
```
- Je vous recommande de ne pas modifier le style de base de bootstrap css classes.
- Mais si ce devait être une norme générale dans votre application, vous pourriez remplacer le bootstrap de style, en utilisant de moins en MOINS et des variables et/ou gérés avec soin remplacer les feuilles de style.
InformationsquelleAutor ph7

Vous devez vous connecter pour publier un commentaire.