Jak umieścić dwie karty bootstrap obok siebie

Karty są jednym z wspólnych elementów dowolnej aplikacji. Zapewniają wzorce projektowe do kompilacji powiązanych danych. Mówiąc dokładniej, Bootstrap oferuje różne klasy do tworzenia i dostosowywania kart, takich jak „tekst karty”,„Header”,„Kartacja”,„karta-img-top", i wiele więcej. „„tekst karty”Jest wykorzystywany do określania tekstu na karcie i„karta-img-top”Dostosowuje obraz na górze karty.

Aby dostosować umieszczenie elementów za pomocą bootstrap, „wiersz" I "przełęcz„Klasy można rozważyć. „Rząd” w bootstrapie zawiera 12 wirtualnych kolumn, a „Col” określa, ile z 12 możliwych kolumn chcesz użyć dla każdego elementu.

Ten post nauczy o regulacji dwóch kart bootstrap na stronie internetowej obok siebie.

Jak umieścić dwie karty bootstrap obok siebie?

Postępuj zgodnie z poniższymi krokami, aby położyć dwie karty bootstrap obok siebie.

Krok 1: Utwórz układ „kontenera”

Bootstrap „pojemnik”Jest podstawowym komponentem, który zawiera wyściółkę i wyrównanie zawartości w określonym urządzeniu.

W pliku HTML najpierw dodaj „”Element i przypisz go klasa„pojemnik”:

Krok 2: Zrób „rząd”

„„wiersz„Klasa jest wykorzystywana do zawierania kolumn. Każdy rząd jest podzielony na siatkę 12 wirtualnych kolumn.

W pojemniku umieść div z klasą „wiersz”W następujący sposób:

Krok 3: Ustaw dwie kolumny na dwie karty

W „„„Element mający klasę”wiersz”, Określ dwie kolumny dla dwóch kart.

Aby utworzyć kartę, postępuj zgodnie z podanymi instrukcjami:

• Ustaw „„Tag z klasą”Col-6". Ta klasa dostosowuje kolumnę, ustawiając liczbę kolumn dla elementu do rozobieg.
• Wewnątrz elementu dodaj kolejny „„Element z klasą”karta". Jest to rozbudowany i elastyczny pojemnik, który oferuje różnorodne treści, takie jak nagłówki, stopki, kolor tła i wiele innych.
• Jego szerokość jest dostosowywana poprzez wykorzystanie właściwości szerokości.
• Zawierać "„Tag z klasą”karta-img-top”, Który jest wykorzystywany do ustawienia obrazu na górę karty. „„src”Atrybut określa ścieżkę obrazu.
• Aby dodać zawartość do karty, zaimplementuj „CARD-CODO„Klasa, która zawiera„

  ”,„

  ", I "”Tagi.

• „„

  ”Dostosowuje tytuł karty za pomocą„Title" klasa.

• „„

  „Element jest przypisany do„tekst karty„Klasa, aby ustawić akapit na karcie.

• Następnie, aby ustawić przycisk, użyj „Btn”,„BTN-Outline-Primary", I "BTN-SM„Zajęcia, aby utworzyć przycisk z konturem:

Artykuły Linuxhint

Piszemy artykuły, aby edukować świat!

Odwiedź link

Utwórz drugą kartę w podobny sposób, gdy powstaje pierwsza karta. Ta karta musi zostać dostosowana w następnej kolumnie, aby umieścić drugą kartę obok pierwszej. W tym celu stwórz osobny „”Pojemnik wraz z„Col-6" klasa:

Filmy Linuxhint

Obejrzyj samouczki wideo oczywiście za darmo!

Odwiedź link

Oto dane wyjściowe wygenerowane przez wdrożenie powyższego kodu:

Oto pełny kod:

Artykuły Linuxhint

Piszemy artykuły, aby edukować świat!

Odwiedź link

Filmy Linuxhint

Obejrzyj samouczki wideo oczywiście za darmo!

Odwiedź link

Wykazaliśmy procedurę umieszczania dwóch kart bootstrap obok siebie.

Wniosek

Aby umieścić dwie karty obok siebie, najpierw stwórz „”Element wraz z„wiersz" klasa. Następnie przeznacz dwa kolejne „„Elementy i przypisz im klasę kolumny„Col-6". To przypisuje sześć kolumn do każdej karty. Aby utworzyć kartę w bootstrapie, „karta„Klasa jest wykorzystywana. To badanie wyjaśniło procedurę wyrównania dwóch kart bootstrap obok siebie.