Jawaban:
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
.top-buffer { margin-top:20px; }bedanya .top30 { margin-top:30px; }? Nah, dari sudut pandang pengembang mana pun: Itu sama. Penyesuaian agar sesuai dengan use case tidak dihitung di sini. Khususnya tidak, jika OP menjawab pertanyaannya sendiri.
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;
}
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.
form-groupmasih ada , tetapi kelas khusus untuk margin / padding telah ditambahkan yang dapat melakukan pekerjaan dan memiliki lebih banyak opsi.
mt-3tidak berfungsi begitu digunakanform-group
Untuk jarak Bootstrap 4 harus diterapkan menggunakan
kelas utilitas steno
dalam format berikut:
{property} {sides} - {size}
Di mana properti adalah salah satu dari:
Di mana sisi adalah salah satu dari:
Di mana ukuran adalah salah satu dari:
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.
<div class="row margin-top-20">kelebihannya <div class"row" style="margin-top: 2.0em">?
Anda dapat menggunakan kelas berikut untuk bootstrap 4:
mt-0
mt-1
mt-2
mt-3
mt-4
...
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;
}Di Bootstrap 4 alpha + Anda dapat menggunakan ini
class margin-bottom-5Kelas-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
Cukup gunakan bs3-upgradepenolong ini untuk pengaturan jarak dan teks ...
Jika Anda menggunakan BootStrap 3.3.7, Anda dapat menggunakan perpustakaan open source bootstrap-spacer via NPM
npm install bootstrap-spaceratau Anda dapat mengunjungi halaman github:
https://github.com/chigozieorunta/bootstrap-spacerBerikut 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>