Twitter Bootstrap – voeg bovenste ruimte tussen rijen toe

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 5pxbijvoorbeeld 😀


Antwoord 3, autoriteit 20%

Bootstrap 3

Als u rijen in bootstrap moet scheiden, kunt u eenvoudig .form-groupgebruiken. 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 .rowelement

<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
  • instellen

  • 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
  • hebben ingesteld

  • y – voor klassen die zowel * -top als * -bottom
  • instellen

  • Blanco – voor klassen die een marge of opvulling instellen op alle 4 zijden van het element

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 1tot 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-marginaan 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>&nbsp;</p>

Other episodes