Come aggiungere margine superiore agli class="row"elementi utilizzando Twitter Bootstrap Framework?

Modificare o sovrascrivere la riga nel bootstrap di Twitter è una cattiva idea, perché questa è una parte fondamentale dell'impalcatura della pagina e avrai bisogno di righe senza un margine superiore.

Per risolvere questo problema, crea invece una nuova classe "top-buffer" che aggiunge il margine standard di cui hai bisogno.

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

E poi usalo sui div della riga dove hai bisogno di un margine superiore.

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

Ok solo per farti sapere cosa è successo dopo, ho risolto usando alcune nuove classi come Acyra dice sopra:

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

quando voglio lo faccio <div class="row top7"></div>

per una migliore risposta è possibile aggiungere margin-top:7%anziché 5pxad esempio: D

Bootstrap 3

Se devi separare le righe nel bootstrap, puoi semplicemente usare .form-group. Ciò aggiunge un margine di 15 px in fondo alla riga.

Nel tuo caso, per ottenere il margine superiore, puoi aggiungere questa classe .rowall'elemento precedente

<div class="row form-group">

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

Bootstrap 4

Puoi utilizzare le classi di spaziatura integrate

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

La "t" nel nome della classe lo applica solo al lato "superiore", esistono classi simili per il fondo, a sinistra, a destra. Il numero definisce le dimensioni dello spazio.

Per Bootstrap 4 la spaziatura dovrebbe essere applicata usando

classi di utilità stenografia

nel seguente formato:

{} {Proprietà lati} - {size}

Dove la proprietà è una di:

• m - per le classi che stabiliscono un margine
• p - per le classi che impostano il riempimento

Dove lati è uno dei:

• t - per le classi che impostano margin-top o padding-top
• b - per le classi che impostano il margine inferiore o il margine inferiore
• l - per le classi che impostano margin-left o padding-left
• r - per le classi che impostano margine-destra o padding-destra
• x - per le classi che impostano sia * -left che * -right
• y - per le classi che impostano sia * -top che * -bottom
• vuoto - per le classi che impostano un margine o un'imbottitura su tutti e 4 i lati dell'elemento

Dove la dimensione è una di:

• 0 - per le classi che eliminano il margine o il riempimento impostandolo su 0
• 1 - (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * .25
• 2 - (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * .5
• 3 - (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer
• 4 - (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * 1.5
• 5 - (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * 3
• auto - per le classi che impostano il margine su auto

Quindi dovresti fare uno di questi:

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

Leggi i documenti per ulteriori spiegazioni. Prova esempi dal vivo qui .

A volte margin-top può causare problemi di progettazione:

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

Quindi, consiglio di creare "classi margin-bottom" anziché "margin-top class" e applicarle all'elemento precedente.

Se si utilizza Bootstrap per importare MENO file Bootstrap, provare a definire le classi margin-bottom con spazi tematici Bootstrap proporzionali:

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

Ho aggiunto queste classi al mio foglio di stile 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; }

Esempio

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

Sto usando queste classi per modificare il margine superiore:

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

Quando ho bisogno di un elemento per avere una spaziatura 2em dall'elemento sopra lo uso in questo modo:

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

Se preferisci i pixel, cambiali in px per farlo a modo tuo.

È possibile utilizzare la seguente classe per bootstrap 4:

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

Rif: https://v4-alpha.getbootstrap.com/utilities/spacing/

Bootstrap 4 alpha, per margin-top: abbreviazione dei nomi delle classi CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) stessi per il fondo, a destra, a sinistra e hai anche la classe automatica ml- auto

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

Le unità sono da 1a 5: in variabili.scss che significa che se si imposta mt-1, si ottiene .25rem di margine superiore.

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

leggi di più qui

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

Aggiungi a questa classe nel file .css:

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

oppure crea una nuova classe e aggiungila all'elemento

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

Se vuoi cambiare solo su una pagina, aggiungi la seguente regola di stile:

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

In Bootstrap 4 alpha + puoi usarlo

class margin-bottom-5

Le classi vengono denominate usando il formato: {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 (solo grondaia, senza margini intorno):

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

CSS (margini uguali intorno, 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;
}

Uso:

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

(con SASS o LESS 15px potrebbe essere una variabile da bootstrap)

<div class="row row-padding">

codice semplice

puoi aggiungere questo codice:

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

Basta semplicemente usare questo bs3-upgradeaiuto per spaziare e allineare il testo ...

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

Se si utilizza BootStrap 3.3.7, è possibile utilizzare la libreria open source bootstrap-spacer tramite NPM

npm install bootstrap-spacer

oppure puoi visitare la pagina di github:

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

Ecco un esempio di come funziona per spaziare le righe usando 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>

Se avresti bisogno di spazi tra le colonne, puoi anche aggiungere 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>

E puoi anche combinare insieme varie classi .row-spacer e .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>

Il mio trucco. Non così pulito, ma funziona bene per me

<p>&nbsp;</p>