web-dev-qa-db-fra.com

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

Comment ajouter une marge supérieure aux éléments class="row" à l'aide de la structure d'amorçage Twitter?

csstwitter-bootstrap
434
itsme

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

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

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

Et utilisez-le ensuite sur les divs de rangées où vous avez besoin d’une marge supérieure.

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

Ok, juste pour vous dire ce qui s’est passé alors, j’ai corrigé l’utilisation de nouvelles classes comme Acyra le dit plus haut:

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

chaque fois que je veux je fais <div class="row top7"></div>

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

164
itsme

Bootstrap 3

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

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

<div class="row form-group">

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

Bootstrap 4

Vous pouvez utiliser les classes spacing intégrées

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

Le "t" dans le nom de la classe l'applique uniquement au côté "haut". Le nombre définit la taille de l'espace.

92
Buksy

Pour Bootstrap 4, l’espacement doit être appliqué avec 

cours d'utilité sténographie

dans le format suivant:

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

Où propriété est l'un des éléments suivants:

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

Où côtés est l'un des éléments suivants:

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

Où size est l'un des éléments suivants:

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

Donc, vous devriez faire l'une de ces choses:

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

Lisez les docs pour plus d'explications ..__ Essayez des exemples en direct sur ici .

48
Rajkaran Mishra

Parfois, margin-top peut causer des problèmes de conception:

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

Je recommande donc 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 pour importer des fichiers LESS Bootstrap, essayez de définir les classes de marge inférieure avec des espaces proportionnels de thème Bootstrap:

.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);}
45
kurroman

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>
33
srmilon

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

Quand j'ai besoin qu'un élément ait 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 donc em en px pour que ce soit comme vous le souhaitez.

27
Hexodus

Vous pouvez utiliser la classe suivante pour bootstrap 4:

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

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

9
Smilefounder

Bootstrap 4 alpha, pour margin-top: noms abrégés de classes CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) Identiques pour les balises inférieure, droite, gauche et auto classe ml-auto

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

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

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

lire plus ici 

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

3
Sherif SALEH

Ajoutez à cette classe dans le fichier .css:

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

ou faire une nouvelle classe et l'ajouter à l'élément

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

Dans Bootstrap 4 alpha +, vous pouvez utiliser cette 

class margin-bottom-5

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

1
Al Quarashi

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

 #myCustomDivID .row {
     margin-top:20px;
 }
1
fredyfx
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>
1
shiva krishna

Bootstrap3

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

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

CSS (marges égales environ, 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)

1
Isometriq

vous pouvez ajouter ce code: 

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

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>
0
Chigozie Orunta

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

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

0
TheAivis
<div class="row row-padding">

code simple

0
Harshvardhan Singh Baghel