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

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"> ...

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

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.

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 .

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

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>

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.

Vous pouvez utiliser la classe suivante pour bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Réf: https://v4-alpha.getbootstrap.com/utilities/spacing/

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

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

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

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

Dans Bootstrap 4 alpha +, vous pouvez utiliser ceci

class margin-bottom-5

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

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>

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)

<div class="row row-padding">

code simple

vous pouvez ajouter ce code:

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

Utilisez simplement cet bs3-upgradeassistant pour les espacements et l'alignement du texte ...

https://github.com/studija/bs3-upgrade

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>

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

<p>&nbsp;</p>