Wie verwende ich Bootstrap-Abstandsdienstprogrammklassen, um Ränder und Abstände in meinen Layouts zu steuern?

Grundlegendes zu Bootstrap-Abstandsdienstprogrammklassen

Bootstrap bietet umfassende Abstandsdienstprogrammklassen zur Steuerung von Rändern und Polsterungen für Elemente. Diese Klassen vereinfachen den Prozess der Anpassung von Leerzeichen in Ihren Layouts.

Syntax

Die Syntax für den Abstand zwischen Dienstprogrammklassen hat sich in verschiedenen Bootstrap-Versionen weiterentwickelt.

Bootstrap 4

Ränder: m{Seiten}-{Größe}
Polsterung: p{Seiten}-{Größe} 🎜>

Bootstrap 5

Ränder: m{sides}-{size} (verwenden Sie me-, ms-, pe -, ps-)
Polsterung: p{sides}-{size}

Beispiele

Bootstrap 4:

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

Bootstrap 5:

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

Responsive Spacing

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

Beispiel:

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

Verwendung in React

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      <div className="m-b-lg">
        {/* Your content */}
      </div>
    );
  }
}

export default Example;</code>

Hinweis:

Das obige ist der detaillierte Inhalt vonWie verwende ich Bootstrap-Abstandsdienstprogrammklassen, um Ränder und Abstände in meinen Layouts zu steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!