Wie erstelle ich ein Kartengitter in Bootstrap?

Um ein Kartengitter in Bootstrap zu erstellen, müssen Sie sein Responsive Grid -System verwenden, um die Kartenkomponenten zu kombinieren. 1. Verwenden Sie Container-, Zeilen- und Col-* -Kass-Layouts, um die Karte in die Spalte zu setzen, um eine reaktionsschnelle Anordnung zu erreichen. 2. steuern Sie die Anzahl der Karten pro Zeile unter verschiedenen Bildschirmen, indem Sie COL-12, COL-MD-6, COL-LG-4, COL-XL-3 und andere Klassen einstellen; 3. Um die Karten hoch konsistent zu machen, können Sie H-100 in der Kartenklasse hinzufügen. 4.. Es wird empfohlen, Gap-Klassen wie G-4 anstelle von MB-4 zu verwenden, um den Abstand in der Reihe einzustellen, um ein ordentliches und adaptives Kartennetzlayout zu erstellen.

Das Erstellen eines Kartengitters in Bootstrap ist unkompliziert, indem das Responsive Grid System ( row , col ) in Kombination mit der card kombiniert wird. Hier erfahren Sie, wie Sie es in modernen Bootstrap (V5) richtig machen können.

1. Verwenden Sie das Gitter von Bootstrap mit Kartenkomponenten

Bootstraps Netz hängt von container , row und col-* -Klassen ab. Karten sollten in Spalten platziert werden, um den richtigen Abstand und die Reaktionsfähigkeit zu gewährleisten.

 <div class = "container">
  <div class = "row">
    <div class = "col-md-4 mb-4">
      <div class = "card">
        <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175409803348854.jpeg"  class="lazy"  src = "image1.jpg" class = "card-img-top" Alt = "..." alt="Wie erstelle ich ein Kartengitter in Bootstrap?" >
        <div class = "kartenkörper">
          <h5 class = "card-title"> card 1 </h5>
          <p class = "card-text"> ein schneller Beispieltext. </p>
          <a href = "#" class = "btn btn-primary"> mehr </a> lesen
        </div>
      </div>
    </div>

    <div class = "col-md-4 mb-4">
      <div class = "card">
        <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175409803348854.jpeg"  class="lazy"  Src = "Image2.jpg" class = "card-img-top" Alt = "..." alt="Wie erstelle ich ein Kartengitter in Bootstrap?" >
        <div class = "kartenkörper">
          <h5 class = "card-title"> card 2 </h5>
          <p class = "card-text"> ein schneller Beispieltext. </p>
          <a href = "#" class = "btn btn-primary"> mehr </a> lesen
        </div>
      </div>
    </div>

    <div class = "col-md-4 mb-4">
      <div class = "card">
        <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175409803348854.jpeg"  class="lazy"  Src = "Image3.jpg" class = "card-img-top" Alt = "..." alt="Wie erstelle ich ein Kartengitter in Bootstrap?" >
        <div class = "kartenkörper">
          <h5 class = "card-title"> card 3 </h5>
          <p class = "card-text"> ein schneller Beispieltext. </p>
          <a href = "#" class = "btn btn-primary"> mehr </a> lesen
        </div>
      </div>
    </div>
  </div>
</div>

✅ Dies schafft ein reaktionsschnelles 3-Spal-Layout auf mittleren Bildschirmen und darüber. Auf kleineren Bildschirmen stapeln Karten vertikal.

2. kontrollieren reaktionsschnelles Verhalten

Passen Sie die col-* an, um zu ändern, wie viele Karten pro Zeile an verschiedenen Haltepunkten erscheinen:

• col-12 : 1 Karte pro Reihe (Mobile)
• col-md-6 : 2 pro Reihe auf Medium
• col-lg-4 : 3 pro zeile auf groß
• col-xl-3 : 4 pro zeile auf extra groß

Beispiel für 4 Karten pro Zeile auf großen Bildschirmen:

 <div class = "row">
  <div class = "col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
    <div class = "card">
      <div class = "kartenkörper">
        <h5 class = "card-title"> card </h5>
        <p class = "card-text"> Inhalt hier. </p>
      </div>
    </div>
  </div>
  <!-wiederholen Sie für andere Karten->
</div>

Dies gibt Ihnen ein flexibles, reaktionsschnelles Kartennetz.

3. Karten gleich hochhöhe (optional)

Wenn Karten unterschiedliche Inhaltslängen haben, können ihre Höhen variieren. Verwenden Sie h-100 , um sie bis zur vollen Spaltenhöhe zu dehnen:

 <div class = "col-md-4 mb-4">
  <div class = "karten h-100">
    <div class = "kartenkörper">
      <H5 class = "Card-title"> Kartentitel </h5>
      <p class = "card-text"> Diese Karte stimmt mit der Höhe der höchsten in der Reihe überein. </p>
    </div>
  </div>
</div>

Fügen Sie allen Karten in derselben Reihe h-100 für einheitliche Höhe hinzu.

4. Fügen Sie Lücken zwischen Karten hinzu (moderner Ansatz)

Verwenden Sie g-* (GAP) -Vergabetaste von Bootstrap anstelle von manuellen Margen:

 <div class = "row g-4">
  <div class = "col-md-4">
    <div class = "card">
      <!-Karteninhalte->
    </div>
  </div>
  <!-mehr Karten->
</div>

Dies fügt automatisch den Abstand zwischen Spalten und Zeilen hinzu, ohne mb-4 zu benötigen.

Schlüsseltipps:

• Wickeln Sie immer Karten in col -Klassen ein.
• Verwenden Sie mb-4 oder g-3/g-4 für den Abstand.
• Verwenden Sie h-100 für gleiche Höhe.
• Wählen Sie col-* Größen basierend auf der Anzahl der Karten pro Zeile, die Sie bei jeder Bildschirmgröße gewünscht haben.

Grundsätzlich ist es nur Bootstraps Netz, das das Layout durchführt - Karten gehen in Spalten. Wird nicht viel einfacher als das.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Kartengitter in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!