Bagaimana cara menambahkan margin ke class="row"elemen menggunakan kerangka bootstrap twitter?

Mengedit atau mengganti baris di bootstrap Twitter adalah ide yang buruk, karena ini adalah bagian inti dari perancah halaman dan Anda akan memerlukan baris tanpa margin atas.

Untuk mengatasinya, buatlah kelas baru "top-buffer" yang menambahkan margin standar yang Anda butuhkan.

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

Dan kemudian gunakan pada baris divs di mana Anda memerlukan margin atas.

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

Ok hanya untuk memberi tahu Anda apa yang terjadi kemudian, saya tetap menggunakan beberapa kelas baru seperti yang Acyra katakan di atas:

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

kapan pun aku mau aku lakukan <div class="row top7"></div>

untuk responsif yang lebih baik, Anda dapat menambahkan margin-top:7%alih-alih 5pxmisalnya: D

Bootstrap 3

Jika Anda perlu memisahkan baris dalam bootstrap, Anda cukup menggunakan .form-group. Ini menambahkan margin 15px ke bagian bawah baris.

Dalam kasus Anda, untuk mendapatkan margin teratas, Anda bisa menambahkan kelas ini ke .rowelemen sebelumnya

<div class="row form-group">

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

Bootstrap 4

Anda dapat menggunakan kelas penspasian bawaan

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

"T" dalam nama kelas membuatnya hanya berlaku untuk sisi "atas", ada kelas serupa untuk bagian bawah, kiri, kanan. Angka mendefinisikan ukuran ruang.

Untuk jarak Bootstrap 4 harus diterapkan menggunakan

kelas utilitas steno

dalam format berikut:

{property} {sides} - {size}

Di mana properti adalah salah satu dari:

• m - untuk kelas yang menetapkan margin
• p - untuk kelas yang mengatur padding

Di mana sisi adalah salah satu dari:

• t - untuk kelas yang mengatur margin-top atau padding-top
• b - untuk kelas yang mengatur margin-bottom atau padding-bottom
• l - untuk kelas yang mengatur margin-kiri atau padding-kiri
• r - untuk kelas yang mengatur margin-right atau padding-right
• x - untuk kelas yang mengatur * -left dan * -right
• y - untuk kelas yang mengatur * -top dan * -bottom
• blank - untuk kelas yang mengatur margin atau padding di keempat sisi elemen

Di mana ukuran adalah salah satu dari:

• 0 - untuk kelas yang menghilangkan margin atau bantalan dengan mengaturnya ke 0
• 1 - (secara default) untuk kelas yang mengatur margin atau padding ke $ spacer * .25
• 2 - (secara default) untuk kelas yang mengatur margin atau padding ke $ spacer * .5
• 3 - (secara default) untuk kelas yang mengatur margin atau padding ke $ spacer
• 4 - (secara default) untuk kelas yang mengatur margin atau padding ke $ spacer * 1.5
• 5 - (secara default) untuk kelas yang mengatur margin atau padding ke $ spacer * 3
• auto - untuk kelas yang mengatur margin ke otomatis

Jadi, Anda harus melakukan semua ini:

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

Baca dokumen untuk penjelasan lebih lanjut. Coba contoh langsung di sini .

Terkadang margin-top dapat menyebabkan masalah desain:

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

Jadi, saya sarankan buat "kelas margin-bawah" bukan "kelas margin-top" dan terapkan pada item sebelumnya.

Jika Anda menggunakan Bootstrap mengimpor KURANG file Bootstrap mencoba mendefinisikan kelas margin-bottom dengan ruang Tema Bootstrap proporsional:

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

Saya menambahkan kelas-kelas ini ke stylesheet bootstrap saya

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

Contoh

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

Saya menggunakan kelas-kelas ini untuk mengubah margin teratas:

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

Ketika saya membutuhkan elemen untuk memiliki spasi 2em dari elemen di atas saya menggunakannya seperti ini:

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

Jika Anda memilih piksel maka ubah em ke px agar sesuai keinginan Anda.

Anda dapat menggunakan kelas berikut untuk bootstrap 4:

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

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

Bootstrap 4 alpha, untuk margin-top: singkatan nama kelas CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) sama untuk bagian bawah, kanan, kiri, dan Anda juga memiliki kelas otomatis ml- mobil

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

Unit dari 1ke 5: dalam variables.scss yang berarti jika Anda mengatur mt-1 memberikan .25rem dari margin atas.

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

baca lebih lanjut di sini

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

Tambahkan ke kelas ini di file .css:

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

atau buat kelas baru dan tambahkan ke elemen

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

Jika Anda ingin mengubah hanya pada satu halaman, tambahkan aturan gaya berikut:

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

Di Bootstrap 4 alpha + Anda dapat menggunakan ini

class margin-bottom-5

Kelas-kelas tersebut dinamai menggunakan 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 (khusus selokan, tanpa margin sekitar):

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

CSS (margin yang sama sekitar, 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;
}

Pemakaian:

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

(dengan SASS atau KURANG 15px bisa menjadi variabel dari bootstrap)

<div class="row row-padding">

kode sederhana

Anda dapat menambahkan kode ini:

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

Cukup gunakan bs3-upgradepenolong ini untuk pengaturan jarak dan teks ...

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

Jika Anda menggunakan BootStrap 3.3.7, Anda dapat menggunakan perpustakaan open source bootstrap-spacer via NPM

npm install bootstrap-spacer

atau Anda dapat mengunjungi halaman github:

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

Berikut adalah contoh cara ini bekerja ke baris spasi menggunakan kelas .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>

Jika Anda membutuhkan spasi di antara kolom, Anda juga bisa menambahkan kelas .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>

Dan Anda juga dapat menggabungkan berbagai kelas .row-spacer & .row-col-spacer bersama-sama:

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

Trik saya. Tidak begitu bersih, tetapi bekerja dengan baik untuk saya

<p>&nbsp;</p>