Rumah > hujung hadapan web > tutorial css > Bagaimanakah kelas Bootstrap \'mb-0\' mempengaruhi margin elemen?

Bagaimanakah kelas Bootstrap \'mb-0\' mempengaruhi margin elemen?

DDD
Lepaskan: 2024-10-27 11:24:30
asal
680 orang telah melayarinya

How does the Bootstrap class

Memahami Class="mb-0" dalam Bootstrap 4

Bootstrap 4 menyediakan kelas utiliti yang komprehensif untuk mengurus margin dan padding merentas saiz skrin yang berbeza, dikenali sebagai mb ( margin bawah) kelas. Kelas ini menawarkan fleksibiliti dalam menetapkan jarak elemen untuk port pandangan yang berbeza-beza, seperti yang diterangkan di bawah:

Memahami class="mb-0"

The class="mb-0" secara khusus menyasarkan margin bawah elemen dan menetapkannya kepada 0. Kelas ini berada di bawah kategori kelas utiliti margin dan digunakan untuk mengalih keluar margin bawah sepenuhnya.

Format Kelas Utiliti Bootstrap dan Padding

Bootstrap menggunakan konvensyen penamaan yang konsisten untuk kelas utiliti margin dan pelapiknya:

{property}{sides}-{size} atau {property }{sides}-{breakpoint}-{saiz}

Harta:

  • m untuk margin
  • p untuk padding

Sisi:

  • t untuk atas
  • b untuk bawah
  • l untuk kiri
  • r untuk kanan
  • x untuk kiri dan kanan
  • y untuk atas dan bawah

Titik putus:

  • xs untuk <576px
  • sm untuk >=576px
  • md untuk >=768px
  • lg untuk >=992px
  • xl untuk >=1200px

Saiz:

  • 0 menetapkan margin atau padding kepada 0
  • 1 set a jidar atau padding kepada .25rem (4px)
  • 2 menetapkan jidar atau padding kepada .5rem (8px)
  • 3 tetapkan jidar atau padding kepada 1rem (16px)
  • 4 tetapkan jidar atau padding kepada 1.5rem (24px)
  • 5 set margin atau padding kepada 3rem (48px)
  • auto set margin kepada auto

Contoh Penggunaan

<code class="html"><p class="mb-0">Lorem ipsum</p></code>
Salin selepas log masuk

Kod ini menggunakan class="mb-0" pada elemen perenggan, mengalih keluar jidar bawahnya.

Sumber Tambahan

Untuk maklumat yang lebih komprehensif, rujuk sumber berikut:

  • [Bootstrap 4.5 - Spacing](https://getbootstrap.com/docs/4.5/utilities/spacing /)
  • [w3schools: Bootstrap Margin dan Kelas Padding](https://www.w3schools.com/bootstrap4/bootstrap_margin_padding.asp)

Atas ialah kandungan terperinci Bagaimanakah kelas Bootstrap 'mb-0' mempengaruhi margin elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan