So platzieren Sie zwei Bootstrap -Karten nebeneinander
Um die Platzierung der Elemente mit Bootstrap anzupassen, ist die “Reihe" Und "colKlassen können berücksichtigt werden. Die „Zeile“ in Bootstrap enthält 12 virtuelle Spalten, und das „Col“ bestimmt, wie viele der 12 möglichen Spalten Sie für jedes Element verwenden möchten.
In diesem Beitrag werden zwei Bootstrap -Karten auf einer Webseite nebeneinander angepasst.
So platzieren Sie zwei Bootstrap -Karten nebeneinander?
Befolgen Sie die unten angegebenen Schritte, um zwei Bootstrap -Karten nebeneinander zu legen.
Schritt 1: Erstellen Sie "Container" -Layout
Eine Bootstrap “ContainerIst eine grundlegende Komponente, die Polsterung und Ausrichtung für den Inhalt innerhalb eines bestimmten Geräts besitzt.
Fügen Sie in der HTML -Datei zunächst eine hinzu “"Element und zuweisen Sie ihm eine Klasse"Container”:
Schritt 2: Machen Sie eine "Reihe"
Der "ReiheDie Klasse wird verwendet, um Spalten zu enthalten. Jede Zeile ist in ein Gitter mit 12 virtuellen Spalten aufgeteilt.
Platzieren Sie im Behälter eine DIV mit der Klasse “Reihe" folgendermaßen:
Schritt 3: Stellen Sie zwei Spalten für zwei Karten ein
Innerhalb der ""Element mit Klasse"Reihe”, Geben Sie zwei Spalten für zwei Karten an.
Um eine Karte zu erstellen, befolgen Sie die angegebenen Anweisungen:
- Setzen Sie eine ""Tag mit der Klasse"col-6”. Diese Klasse passt eine Spalte an, indem die Anzahl der Spalten für das Element festgelegt wird.
- Im Element einen anderen hinzufügen “"Element mit der Klasse"Karte”. Es ist ein erweiterbarer und flexibler Behälter, der eine Vielzahl von Inhalten wie Header, Fußzeilen, Hintergrundfarbe und vieles mehr bietet.
- Die Breite wird durch die Verwendung der Breite Eigenschaft eingestellt.
- Umfassen die ""Tag mit der Klasse"Karten-Img-Top”, Das verwendet wird, um ein Bild auf das Oberteil der Karte zu setzen. Der "srcDas Attribut gibt den Bildpfad an.
- Um den Inhalt der Karte hinzuzufügen, implementieren Sie die “Kartenkörper”Klasse, die das enthält“","", Und "" Stichworte.
- Der "”Passt den Kartentitel mit der“ anKartentitel" Klasse.
- Der "Element wird mit dem "zugeordnet"KartentextKlasse, um den Absatz auf der Karte festzulegen.
- Verwenden Sie dann, um eine Taste einzustellen, die “Btn","BTN-OUTLINE-Primary", Und "Btn-smKlassen, um eine Schaltfläche mit einem Umriss zu erstellen:
LinuxHint -Artikel
Wir schreiben Artikel, um die Welt zu erziehen!
Besuchen Sie Link
Erstellen Sie die zweite Karte auf ähnliche Weise, wenn die erste Karte erstellt wird. Diese Karte muss in der nächsten Spalte angepasst werden, um die zweite Karte neben der ersten zu platzieren. Zu diesem Zweck erstellen Sie eine separate “"Behälter zusammen mit"col-6" Klasse:
LinuxHint -Videos
Sehen Sie sich Natürlich kostenlos Video -Tutorials an!
Besuchen Sie Link
Hier ist die Ausgabe, die durch die Implementierung des obigen Codes generiert wird:
Hier ist der vollständige Code:
LinuxHint -Artikel
Wir schreiben Artikel, um die Welt zu erziehen!
Besuchen Sie Link
LinuxHint -Videos
Sehen Sie sich Natürlich kostenlos Video -Tutorials an!
Besuchen Sie Link
Wir haben das Verfahren zum Platzieren der beiden Bootstrap -Karten nebeneinander gezeigt.
Abschluss
Erstellen Sie zunächst zwei Karten nebeneinander, um eine zu erstellen “”Element zusammen mit dem“Reihe" Klasse. Dann zwei weitere zuweisen “"Elemente und zuweisen Sie ihnen eine Spaltenklasse"col-6”. Dadurch werden jeder Karte sechs Spalten zugewiesen. Um eine Karte in Bootstrap zu erstellen, die “Karte”Klasse wird genutzt. Diese Studie hat das Verfahren erklärt, um zwei Bootstrap -Karten nebeneinander auszurichten.