Come posizionare due carte bootstrap una accanto all'altra
Per regolare il posizionamento degli elementi usando bootstrap, "riga" E "col"Le lezioni possono essere considerate. La "riga" in bootstrap contiene 12 colonne virtuali e il "col" determina quante delle 12 possibili colonne si desidera utilizzare per ciascun elemento.
Questo post insegnerà a regolare due schede bootstrap su una pagina web fianco a fianco.
Come posizionare due carte bootstrap una accanto all'altra?
Seguire i passaggi indicati di seguito per posare due carte bootstrap fianco a fianco.
Passaggio 1: creare layout "contenitore"
Un bootstrap "contenitore"È una componente fondamentale che contiene imbottitura e allineamento per il contenuto all'interno di un dispositivo specifico.
Nel file HTML, prima, aggiungi un ""Elemento e assegnarlo una classe"contenitore":
Passaggio 2: crea una "riga"
IL "riga"La classe viene utilizzata per contenere colonne. Ogni riga è divisa in una griglia di 12 colonne virtuali.
All'interno del contenitore, posizionare un div con la classe "riga" come segue:
Passaggio 3: imposta due colonne per due carte
All'interno del ""Elemento con classe"riga", Specifica due colonne per due carte.
Per creare una carta, seguire le istruzioni fornite:
- Imposta un "Tag con la classe "Col-6". Questa classe regola una colonna impostando il numero di colonne per l'elemento da.
- All'interno dell'elemento, aggiungi un altro ""Elemento con la classe"carta". È un contenitore espandibile e flessibile che offre una varietà di contenuti come intestazioni, piè di pagina, color background e molti altri.
- La sua larghezza è regolata utilizzando la proprietà della larghezza.
- Includere il "Tag con la classe "CARD-IMG-TOP", Che viene utilizzato per impostare un'immagine sulla parte superiore della carta. IL "src"L'attributo specifica il percorso dell'immagine.
- Per aggiungere il contenuto alla scheda, implementa il "Body di carta"Classe, che contiene il"","", E ""Tag.
- IL ""Regola il titolo della carta usando il"Title delle carte" classe.
- IL ""L'elemento è assegnato con il"Testo di carta"Classe per impostare il paragrafo sulla scheda.
- Quindi, per impostare un pulsante, utilizzare il “btn","btn-outline-primary", E "btn-sm"Classi per creare un pulsante con uno schema:
Articoli Linuxhint
Scriviamo articoli per educare il mondo!
Visita il link
Crea la seconda scheda in modo simile a quando viene creata la prima carta. Questa carta deve essere regolata nella colonna successiva per posizionare la seconda carta accanto alla prima. A tale scopo, crea un "separato"Container insieme a"Col-6" classe:
Video di Linuxhint
Guarda i video tutorial ovviamente gratuitamente!
Visita il link
Ecco l'output generato implementando il codice sopra:
Ecco il codice completo:
Articoli Linuxhint
Scriviamo articoli per educare il mondo!
Visita il link
Video di Linuxhint
Guarda i video tutorial ovviamente gratuitamente!
Visita il link
Abbiamo dimostrato la procedura per posizionare le due schede bootstrap una accanto all'altra.
Conclusione
Per posizionare due carte una accanto all'altra, prima, crea un ""Elemento insieme al"riga" classe. Quindi, assegna altri due ""Elementi e assegna loro una classe di colonne"Col-6". Questo assegnerà sei colonne a ciascuna carta. Per creare una carta in bootstrap, il “carta"La classe è utilizzata. Questo studio ha spiegato la procedura per allineare due carte bootstrap fianco a fianco.