Hoe voeg je margin top toe aan class="row"
elementen met behulp van het twitter bootstrap framework?
Antwoord 1, autoriteit 100%
Het bewerken of overschrijven van de rij in Twitter-bootstrap is een slecht idee, omdat dit een essentieel onderdeel is van de paginastructuur en u rijen zonder bovenmarge nodig hebt.
Om dit op te lossen, maakt u in plaats daarvan een nieuwe klasse “top-buffer” die de standaardmarge toevoegt die u nodig heeft.
.top-buffer { margin-top:20px; }
En gebruik het dan op de rij-div’s waar je een bovenmarge nodig hebt.
<div class="row top-buffer"> ...
Antwoord 2, autoriteit 22%
Ok om je te laten weten wat er toen is gebeurd, ik heb een aantal nieuwe klassen gebruikt, zoals Acyra hierboven zegt:
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
wanneer ik wil, doe ik <div class="row top7"></div>
voor een betere respons kun je margin-top:7%
toevoegen in plaats van 5px
bijvoorbeeld 😀
Antwoord 3, autoriteit 20%
Bootstrap 3
Als u rijen in bootstrap moet scheiden, kunt u eenvoudig .form-group
gebruiken. Dit voegt 15px marge toe aan de onderkant van de rij.
In jouw geval, om de marge bovenaan te krijgen, kun je deze klasse toevoegen aan het vorige .row
element
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
Bootstrap 4
U kunt ingebouwde spacing classes
gebruiken
<div class="row mt-3"></div>
De “T” in de naam van de klassen maakt het alleen van toepassing op “Top” -kant, er zijn vergelijkbare klassen voor onderkant, links, rechts. Het nummer definieert de ruimtegrootte.
Antwoord 4, Autoriteit 11%
Voor bootstrap 4 -afstand moet worden toegepast met
SHORTHAND UTILITY CLASSES
In het volgende formaat:
{onroerend goed} {zijkanten} – {size}
Waar Property is er een van:
- m – voor klassen die marge instellen
- p – Voor klassen die opvullen
waar zijden is een van:
- t – voor klassen die margin-top of padding-top
- B – voor klassen die margin-bodem of padding-bodem instellen
- L – voor klassen die margin-links of padding-links stellen
- r – voor klassen die margin-rechts of pulpprogramma’s instellen
- x – voor klassen die zowel * -left als * -right
- y – voor klassen die zowel * -top als * -bottom
- Blanco – voor klassen die een marge of opvulling instellen op alle 4 zijden van het element
instellen
hebben ingesteld
instellen
Waar Maat is er een van:
- 0 – voor klassen die de marge of opvulling elimineren door het in te stellen op 0
- 1 – (standaard) voor klassen die de marge of opvulling instellen op $ spacer * .25
- 2 – (standaard) voor klassen die de marge of opvulling instellen op $ spacer * .5
- 3 – (standaard) voor klassen die de marge of opvulling instellen op $ spacer
- 4 – (standaard) voor klassen die de marge of opvulling instellen op $ spacer * 1.5
- 5 – (standaard) voor klassen die de marge of opvulling instellen op $spacer * 3
- auto – voor klassen die de marge op auto zetten
Dus je zou een van de volgende dingen moeten doen:
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">
Lees de docsvoor meer uitleg.
Probeer live voorbeelden hier.
Antwoord 5, autoriteit 5%
Soms kan margin-top ontwerpproblemen veroorzaken:
http://www.w3.org/TR/CSS2/box.html#collapsing -marges
Dus ik raad aan om ‘klassen met de laagste marge’ te maken in plaats van ‘klassen met de hoogste marge’ en deze toe te passen op het vorige item.
Als je Bootstrap gebruikt en MINDER Bootstrap-bestanden importeert, probeer dan de klassen met de laagste marges te definiëren met proportionele Bootstrap-themaruimten:
.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);}
Antwoord 6, autoriteit 4%
Ik heb deze klassen toegevoegd aan mijn bootstrap-stylesheet
.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; }
Voorbeeld
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
Antwoord 7, autoriteit 3%
Ik gebruik deze klassen om de bovenmarge te wijzigen:
.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; }
Als ik een element nodig heb met een afstand van 2em van het bovenstaande element, gebruik ik het als volgt:
<div class="row margin-top-20">Something here</div>
Als je de voorkeur geeft aan pixels, verander dan de em in px om het naar jouw zin te hebben.
Antwoord 8
U kunt de volgende klasse gebruiken voor bootstrap 4:
mt-0
mt-1
mt-2
mt-3
mt-4
…
Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/
Antwoord 9
Bootstrap 4 alpha, voor margin-top: verkorte CSS-klassenamen mt-1, mt-2 ( mt-lg-5, mt-sm-2)
hetzelfde voor de onderkant, rechts, links, en je hebt ook auto klasse ml-auto
<div class="mt-lg-1" ...>
Eenheden zijn van 1
tot 5
: in de variables.scss
wat betekent dat als je mt-1 instelt, het .25rem marge boven geeft.
$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;
lees hier meer
https://v4-alpha.getbootstrap.com/utilities/ spacing/#horizontal-centering
Antwoord 10
Toevoegen aan deze klasse in het .css-bestand:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
of maak een nieuwe klasse en voeg deze toe aan het element
.rowSpecificFormName td {
margin-top: 50px;
}
Antwoord 11
<div class="row row-padding">
eenvoudige code
Antwoord 12
Als u slechts één pagina wilt wijzigen, voegt u de volgende stijlregel toe:
#myCustomDivID .row {
margin-top:20px;
}
Antwoord 13
In Bootstrap 4 alpha+ kun je dit gebruiken
class margin-bottom-5
De klassen worden benoemd in het formaat: {property}-{sides}-{size}
Antwoord 14
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>
Antwoord 15
Bootstrap3
CSS (alleen rugmarge, zonder marges rondom):
.row.row-gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
margin-bottom: 15px;
}
CSS (gelijke marges rond, 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;
}
Gebruik:
<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>
(met SASS of MINDER 15px kan een variabele van bootstrap zijn)
Antwoord 16
Er is een truc om marge automatischalleen voor de 2e+ rij in de container toe te voegen.
.container-row-margin .row + .row {
margin-top: 1rem;
}
Het toevoegen van de .container-row-margin
aan de container, resulteert in:
Volledige HTML:
<div class="bg-secondary text-white">
div outside of the container.
</div>
<div class="container container-row-margin">
<div class="row">
<div class="col col-4 bg-warning">
Row without top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
</div>
<div class="bg-secondary text-white">
div outside of the container.
</div>
Genomen uit officiële voorbeelden.
Antwoord 17
u kunt deze code toevoegen:
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
Antwoord 18
Gebruik gewoon deze bs3-upgrade
-helper voor spaties en tekstuitlijning…
https://github.com/studija/bs3-upgrade
Antwoord 19
Als je BootStrap 3.3.7 gebruikt, kun je de open source-bibliotheek bootstrap-spacer gebruiken via NPM
npm install bootstrap-spacer
of u kunt de github-pagina bezoeken:
https://github.com/chigozieorunta/bootstrap-spacer
Hier is een voorbeeld van hoe dit werkt om rijen te spacen met de klasse .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>
Als u spaties tussen kolommen nodig heeft, kunt u ook de klasse .row-col-spacer toevoegen:
<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>
En je kunt ook verschillende .row-spacer & .row-col-spacer klassen samen:
<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>
Antwoord 20
Mijn truc. Niet zo schoon, maar werkt goed voor mij
<p> </p>