Twitter Bootstrap - ajoutez un espace supérieur entre les lignes


483

Comment ajouter une marge supérieure aux class="row"éléments en utilisant le framework de bootstrap twitter?

Réponses:


801

Modifier ou remplacer la ligne dans le bootstrap Twitter est une mauvaise idée, car il s'agit d'un élément central de l'échafaudage de page et vous aurez besoin de lignes sans marge supérieure.

Pour résoudre ce problème, créez plutôt une nouvelle classe "top-buffer" qui ajoute la marge standard dont vous avez besoin.

.top-buffer { margin-top:20px; }

Et puis utilisez-le sur les divs de ligne où vous avez besoin d'une marge supérieure.

<div class="row top-buffer"> ...

45
La modification de la ligne native est incorrecte pour un framework, et la nouvelle classe devrait simplement compléter la classe de ligne ... c'est une différence subtile mais dans Twitter Bootstrap, la ligne a un rôle de mise en page spécifique. Quoi qu'il en soit, j'essaie juste d'aider, ma solution est une solution qui fonctionne pour le problème.
Acyra

11
aucun moyen, ces réponses sont légèrement différentes à mon humble avis. Celui-ci est plus utilisable car il englobe le "nom de votre style de classe pour que votre html soit plus facile à lire" et vous pouvez lire margin-top dans le html au lieu de rowSpecificForName. Cette réponse est plus en ligne avec les modèles de bootstrap twitter.
Dean Hiller

2
Ils vont ajouter des classes d'espacement vertical spécifiques dans Bootstrap 4: github.com/twbs/bootstrap/issues/4286
icc97

2
Tout ce que j'ai appris de ces commentaires, c'est que les développeurs sont très perspicaces et certains préfèrent 2 + 3 = 5 et d'autres 3 + 2 = 5. Continuons ...
Fabio S.

3
@FabioS. Ce qu'il faut apprendre, c'est que pour un framework comme Bootstrap, éditer le code natif ou écraser c'est une mauvaise idée. Les scénarios sont infinis, mais voici quelques exemples. a.) écrasement - si vous écrasez la classe .row, vous devez maintenant parcourir votre projet et ajouter une classe supplémentaire aux lignes qui ne devraient pas recevoir la marge b.) modifier le code natif - vous héritez d'un projet au travail et vous voulez passer à bootstrap4; OOPS! Rien ne semble correct!? Vous avez maintenant le fardeau de parcourir le fichier bootstrap 3 en essayant de trouver ce que le développeur précédent a modifié.
peroija

176

Ok juste pour vous faire savoir ce qui s'est passé alors, j'ai corrigé en utilisant de nouvelles classes comme Acyra le dit ci-dessus:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

quand je veux je fais <div class="row top7"></div>

pour une meilleure réactivité, vous pouvez ajouter margin-top:7%au lieu de 5pxpar exemple: D


13
Je pense que cette solution est beaucoup plus élégante que la solution acceptée.
rdiaz82

72
C'est le même.
alexander

@alexander mais plus générique.
Ejaz

6
En quoi est-ce .top-buffer { margin-top:20px; }différent de .top30 { margin-top:30px; }? Eh bien, du point de vue de tout développeur: c'est la même chose. Les ajustements pour s'adapter au cas d'utilisation ne comptent pas ici. Surtout pas, si le PO a répondu à sa propre question.
alexander

2
La marge supérieure classique de 17 pixels; Très utile.
adripanico

129

Bootstrap 3

Si vous devez séparer des lignes dans le bootstrap, vous pouvez simplement utiliser .form-group. Cela ajoute une marge de 15 pixels au bas de la ligne.

Dans votre cas, pour obtenir une marge supérieure, vous pouvez ajouter cette classe à l' .rowélément précédent

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

Vous pouvez utiliser des classes d'espacement intégrées

<div class="row mt-3"></div>

Le "t" dans le nom de la classe ne s'applique qu'au côté "supérieur", il existe des classes similaires pour le bas, la gauche et la droite. Le nombre définit la taille de l'espace.


Le groupe de formulaires a-t-il été supprimé de BS4?
Z. Khullah

3
Non, form-groupest toujours présent , mais des classes spéciales pour la marge / le remplissage ont été ajoutées qui peuvent faire le travail et ont plus d'options.
Buksy

Y a-t-il eu plusieurs changements dans Bootstrap V 4? Je suis sur une version de 4 maintenant et mt-3ne fonctionne pas si utiliséform-group
Nick Schwaderer

Cela devrait fonctionner , vérifiez si le CSS d'amorçage que vous avez lié à votre projet contient la définition de classe ".mt-3".
Buksy

82

Pour Bootstrap 4, l' espacement doit être appliqué en utilisant

classes utilitaires sténographiques

au format suivant:

{propriété} {côtés} - {taille}

Lorsque la propriété fait partie de:

  • m - pour les classes qui définissent la marge
  • p - pour les classes qui définissent le remplissage

Où les côtés font partie de:

  • 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
  • vide - pour les classes qui définissent une marge ou un remplissage sur les 4 côtés de l'élément

Où la taille est l'une des:

  • 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 la marge ou le remplissage sur $ spacer * .25
  • 2 - (par défaut) pour les classes qui définissent la marge ou le remplissage sur $ spacer * .5
  • 3 - (par défaut) pour les classes qui définissent la marge ou le remplissage sur $ spacer
  • 4 - (par défaut) pour les classes qui définissent la marge ou le remplissage à $ spacer * 1,5
  • 5 - (par défaut) pour les classes qui définissent la marge ou le remplissage à $ spacer * 3
  • auto - pour les classes qui définissent la marge sur auto

Vous devez donc effectuer l'une de ces actions:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Lisez les documents pour plus d'explications. Essayez des exemples en direct ici .


3
Cela devrait être la réponse acceptée maintenant avec la sortie de Bootstrap 4. Il est livré avec ces classes intégrées, pas besoin d'en créer de nouvelles.
Matt K

45

Parfois, margin-top peut entraîner des problèmes de conception:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Donc, je recommande de créer des "classes de marge inférieure" au lieu de "classes de marge supérieure" et de les appliquer à l'élément précédent.

Si vous utilisez Bootstrap en important MOINS de fichiers Bootstrap, essayez de définir les classes margin-bottom avec des espaces proportionnels Bootstrap Theme:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

33

J'ai ajouté ces classes à ma feuille de style bootstrap

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Exemple

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

27

J'utilise ces classes pour modifier la marge supérieure:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Lorsque j'ai besoin d'un élément pour avoir un espacement de 2em par rapport à l'élément ci-dessus, je l'utilise comme ceci:

<div class="row margin-top-20">Something here</div>

Si vous préférez les pixels, changez-les en px pour l'avoir à votre façon.


6
Bonne idée, mais je résume les chiffres, car ils sont trop précis. Si vous vous en tenez aux abstractions comme s, m, l, xl, xxl, etc., vous pouvez changer les tailles via css sans avoir à changer les noms dans les modèles.
Mike Purcell

1
@MikePurcell Bonne pensée et c'est peut-être la bonne solution pour vous. Mais je préfère une manière plus précise de définir les marges. Utiliser em au lieu de px me donne un moyen lâche de le réaliser sans être trop précis.
Hexodus

3
Quel est l'avantage de <div class="row margin-top-20">plus <div class"row" style="margin-top: 2.0em">?
icc97

@ icc97 Fondamentalement, séparé des préoccupations, mais ici vous pouvez voir d'autres opinions: stackoverflow.com/a/2612494/1683224 .
Wiley Marques

@WileyMarques C'est vrai pour une classe nommée par exemple "top-buffer" (comme dans la réponse acceptée), mais cela n'a pas de sens pour une classe nommée margin-top-20. À moins que vous ne soyez heureux que margin-top-20 ajoute réellement autre chose que 2ems de rembourrage, ce qui serait tout simplement déroutant.
thelem


4

Bootstrap 4 alpha, pour margin-top: noms de classe CSS raccourcis mt-1, mt-2 (mt-lg-5, mt-sm-2) idem pour le bas, la droite, la gauche, et vous avez également la classe automatique ml- auto

    <div class="mt-lg-1" ...>

Les unités sont de 1à 5: dans le variables.scss, ce qui signifie que si vous définissez mt-1, cela donne 0,25rem de marge supérieure.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

en savoir plus ici

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering


3

Ajoutez à cette classe dans le fichier .css:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

ou créer une nouvelle classe et l'ajouter à l'élément

.rowSpecificFormName td {
    margin-top: 50px;
}

7
uhmmmmm je n'aime pas toucher le CSS, et si j'ai besoin de lignes sans marge dans les autres pages?
itsme

Vous pouvez créer une nouvelle classe .rowSpecificForm
Nielsen Ramon

2
Mais il n'y a pas de classe css définie pour seulement «margin-top» dans Twitter Bootstrap.
Nielsen Ramon

étrange, ils n'ont pas réglé quelques cours d'espacement vertical, j'ai besoin de les ajouter, il n'y a pas d'autre solution: /, merci Nielsen
itsme

8
rappelez-vous les cascades CSS, vous n'aurez donc jamais à modifier bootstrap.css.
ONOZ

1

Si vous souhaitez modifier une seule page, ajoutez la règle de style suivante:

 #myCustomDivID .row {
     margin-top:20px;
 }

1

Dans Bootstrap 4 alpha +, vous pouvez utiliser ceci

class margin-bottom-5

Les classes sont nommées en utilisant le format: {property}-{sides}-{size}


1
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Veuillez ajouter des explications à votre réponse. Répondre sans explication est inutile.
ADreNaLiNe-DJ

1

Bootstrap3

CSS (gouttière uniquement, sans marges autour):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (marges égales autour, 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Usage:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(avec SASS ou LESS 15px pourrait être une variable de bootstrap)



0

vous pouvez ajouter ce code:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


0

Si vous utilisez BootStrap 3.3.7, vous pouvez utiliser la bibliothèque open source bootstrap-spacer via NPM

npm install bootstrap-spacer

ou vous pouvez visiter la page github:

https://github.com/chigozieorunta/bootstrap-spacer

Voici un exemple de la façon dont cela fonctionne pour espacer les lignes à l'aide de la classe .row-spacer:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Si vous souhaitez des espaces entre les colonnes, vous pouvez également ajouter la classe .row-col-spacer:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Et vous pouvez également combiner différentes classes .row-spacer et .row-col-spacer:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

1
Je déconseille d'ajouter une dépendance pour 40 lignes de css
Andrew Diamond

-3

Mon truc. Pas si propre, mais fonctionne bien pour moi

<p>&nbsp;</p>
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.