Posting ini akan membahas apa itu ruang selokan dan bagaimana mereka dapat dihapus untuk div tertentu di Bootstrap.
Apa itu Gutter Space di Bootstrap?
Talang adalah ruang atau celah antara kolom yang dihasilkan oleh padding horizontal. Mereka digunakan untuk mendukung penyelarasan dan spasi konten responsif dalam sistem grid Bootstrap.
Di bawah gambar yang diberikan menunjukkan baris dengan batas merah di sekitarnya. Di dalam baris, ada tiga elemen div berukuran sama dari kolom kisi yang sama. Meskipun kolomnya sama, masih ada ruang selokan di antara keduanya:
Bagaimana Cara Menghapus Ruang Talang untuk div Tertentu di Bootstrap?
Di Bootstrap, kelas “ tanpa selokan ” digunakan untuk menghilangkan ruang selokan dari setiap div.
Untuk tujuan ini:
- Tambah sebuah ' ” tag bersama dengan kelas “ main-div ”.
- Kemudian, sesuaikan bagian baris dengan menambahkan “
' elemen dengan kelas ' baris ”. Karena kita harus menghapus spasi dari baris, tentukan kelas “ tanpa selokan ' didalamnya.- Untuk membagi baris kisi menjadi tiga kolom yang sama, gunakan kelas “ kol-4 ”.
- Di dalam penampung “
” setiap kolom, sesuaikan elemen “” dengan kelas “ kolom-1 ”, “ kolom-2 ', dan ' kolom-3 ”, masing-masing: < div kelas = 'div utama' >
< div kelas = 'baris tanpa talang' >
< div kelas = 'col-4' >
< div kelas = 'kolom-1' >< / div >
< / div >
< div kelas = 'col-4' >
< div kelas = 'kolom-2' >< / div >
< / div >
< div kelas = 'col-4' >
< div kelas = 'kolom-3' >< / div >
< / div >
< / div >
< / div >CSS
Di bagian CSS, kelas yang disebutkan di halaman HTML diberi gaya dengan beberapa properti gaya.
Gaya kelas 'main-div'.
.main-div {
lebar : 600px;
margin: 50px otomatis;
}“ .main-div ” disebutkan untuk mengakses elemen div yang memiliki kelas “ main-div ”. Properti berikut diterapkan ke kelas ini:
- “ lebar ” mendefinisikan lebar elemen.
- “ batas ” mengatur jarak di sekitar elemen.
Kelas gaya 'baris'.
.baris {
berbatasan : 1px merah pekat;
}Bootstrap “ baris ' kelas ditambahkan dengan ' berbatasan ' Properti. Ini akan membungkus baris kisi dengan lebar, gaya, dan batas warna yang ditentukan.
Tiga kelas “ kolom-1 ”, “ kolom-2 ', dan ' kolom-3 ” diberi CSS “ warna latar belakang ' dan ' tinggi ” properti untuk membuatnya menonjol.
Gaya kelas 'kolom-1'.
.kolom- satu {
Latar Belakang- warna : pirus;
tinggi : 200px;
}Gaya kelas 'kolom-2'.
.kolom- 2 {
Latar Belakang- warna : ungu;
tinggi : 200px;
}Gaya kelas 'kolom-3'.
.kolom- 3 {
Latar Belakang- warna : kuning hijau;
tinggi : 200px;
}Dapat diamati bahwa “
'wadah dengan kelas' baris ” telah berhasil disesuaikan tanpa celah di antaranya:
Kami telah mengajari Anda cara menghapus ruang selokan untuk div tertentu di Bootstrap.
Kesimpulan
Untuk menghapus ruang selokan untuk div tertentu, kelas “ tanpa selokan ' dapat digunakan. Untuk tujuan ini, tambahkan “
' elemen bersama dengan ' baris tanpa talang ' kelas. Posting ini telah memberikan panduan komprehensif tentang ruang selokan dan bagaimana mereka dapat dihilangkan untuk div tertentu di Bootstrap. - Kemudian, sesuaikan bagian baris dengan menambahkan “