Heim > Web-Frontend > CSS-Tutorial > Wie wirkt sich die Bootstrap-Klasse „mb-0' auf den Rand eines Elements aus?

Wie wirkt sich die Bootstrap-Klasse „mb-0' auf den Rand eines Elements aus?

DDD
Freigeben: 2024-10-27 11:24:30
Original
675 Leute haben es durchsucht

How does the Bootstrap class

Klasse="mb-0" in Bootstrap 4 verstehen

Bootstrap 4 bietet umfassende Hilfsklassen zum Verwalten von Rändern und Abständen über verschiedene Bildschirmgrößen hinweg, bekannt als mb ( Rand unten) Klassen. Diese Klassen bieten Flexibilität beim Festlegen von Elementabständen für unterschiedliche Ansichtsfenster, wie unten beschrieben:

Klasse="mb-0" verstehen

Die Klasse="mb-0" zielt speziell auf den unteren Rand eines Elements ab und setzt ihn auf 0. Diese Klasse fällt in die Kategorie der Margin-Utility-Klassen und wird verwendet, um den unteren Rand vollständig zu entfernen.

Bootstrap Margin and Padding Utility Class Format

Bootstrap verwendet eine einheitliche Namenskonvention für seine Margin- und Padding-Dienstprogrammklassen:

{property}{sides}-{size} oder {property }{sides}-{breakpoint}-{size}

Eigenschaft:

  • m für Rand
  • p für Polsterung

Seiten:

  • t für oben
  • b für unten
  • l für links
  • r für rechts
  • x für links und rechts
  • y für oben und unten

Haltepunkte:

  • xs für <576px
  • sm für >=576px
  • md für >=768px
  • lg für >=992px
  • xl für >=1200px

Größe:

  • 0 setzt einen Rand oder Abstand auf 0
  • 1 setzt a Rand oder Abstand auf .25rem (4px)
  • 2 legt einen Rand oder Abstand auf .5rem (8px) fest
  • 3 setzt einen Rand oder Abstand auf 1rem (16px)
  • 4 setzt einen Rand oder Abstand auf 1,5rem (24px)
  • 5 setzt einen Rand oder Abstand auf 3rem (48px)
  • Auto setzt den Rand auf Auto

Beispielverwendung

<code class="html"><p class="mb-0">Lorem ipsum</p></code>
Nach dem Login kopieren

Dieser Code wendet die Klasse="mb-0" auf das Absatzelement an und entfernt seinen unteren Rand.

Zusätzliche Ressourcen

Ausführlichere Informationen finden Sie in den folgenden Ressourcen:

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

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Bootstrap-Klasse „mb-0' auf den Rand eines Elements aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage