IP Girl
  1. IP Girl
  3. Ajouter un espace vide vertical en utilisant twitter bootstrap
Intereting Posts
Linq avec le groupe en comptant Créer un fichier uniquement s’il n’existe pas dans Node.js Existe-t-il une macro __CLASS__ en C ++? Retour des promesses des actions de Vuex Comment raccrocher les appels sortants dans Android? Comment fonctionne l’opérateur de comparaison avec null int? Comment comparer deux révisions de Bitbucket? Comment éditer un champ sérialisé Rails dans un formulaire? Spring Beans – comment câbler null en tant que constructeur? Dépannage “Le paramètre de type T cache l’avertissement de type T” Supprimer les éléments null d’une liste dans Groovy Ruby: Comment trouver un élément dans le tableau qui a le plus d’occurrences? Impossible de modifier les dépendances de la configuration (après l’activation de l’exécution instantanée) Y a-t-il une monade qui n’a pas de transformateur monad correspondant (sauf IO)? Différence entre \ A \ z et ^ $ dans les expressions régulières Ruby

Ajouter un espace vide vertical en utilisant twitter bootstrap

Quelle est la meilleure façon d’append un espace vide vertical à l’aide du programme d’amorçage de Twitter?

Par exemple, supposons que je crée une page de destination et que vous souhaitez un peu d’espace blanc vide (100px) au-dessus et au-dessous d’un bouton. De toute évidence, je pourrais créer une certaine classe pour ce bouton en particulier, mais je pense que Bootstrap devrait avoir un moyen d’append des espaces vides verticales.

Il n’ya rien d’intégré pour ce type d’espace vertical, vous devez donc vous en tenir à une classe personnalisée. Pour les petites hauteurs, je lance généralement un

autour d’un bouton.

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

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

 
  

Cela appenda un espace à la hauteur d’un élément de forme normal.

Il semble qu’environ 1 ligne sur un formulaire est approximativement 50px (47px sur mon élément que je viens d’inspecter). Ceci est 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; }

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 pratique pour ces situations:

Pour la version 3, il ne semble pas y avoir de méthode “bootstrap” pour y parvenir proprement.

Un panel , un well et un form-group fournissent 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

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

Citant la documentation pour 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. C’est parce que ces classes sont appliquées à partir de min-width: 0 et plus, et ne sont donc pas liées par une requête de média. Les points d’arrêt restants incluent toutefois 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 , lg et xl .

Où propriété est l’un de:

  • m – pour les classes qui définissent une margin
  • p – pour les classes qui définissent un 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 à 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 un padding sur les 4 côtés de l’élément

Où taille est l’un des:

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

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

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

 
 

J’ai simplement créé une classe div en utilisant différentes hauteurs, à savoir

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 diviseur pour les hauteurs requirejses.

J’ai essayé d’utiliser

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:

    Si cela ne vous donne pas suffisamment d’espace vertical, vous pouvez en obtenir plus en ajoutant des balises nestedes

  1.  

    2. .

    Il suffit d’utiliser
    . Je me suis retrouvé ici à chercher la réponse à cette question, puis je me suis senti stupide de ne pas penser à 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 existe déjà plusieurs bonnes solutions, mais une solution simple qui a fonctionné pour moi

    et alors 

     
     
     
     
     
    Button

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

    Il n’y a rien de plus sec que 

     .btn { margin-bottom:5px; }