Significato dei numeri in "col-md-4", "col-xs-1", "col-lg-2" in Bootstrap


440

Sono confuso con il sistema a griglia nel nuovo Bootstrap, in particolare queste classi:

col-lg-*
col-md-*
col-xs-*

(dove * rappresenta un numero).

Qualcuno può spiegare quanto segue:

  1. In che modo quel numero allinea le griglie?
  2. Come usare questi numeri?
  3. Cosa rappresentano realmente?

13
Troverai una spiegazione qui . Puoi usare il numero nella colonna come vuoi, ma assicurati che la somma di tutti i numeri della colonna in una stessa riga deve essere uguale a 12
Doan Cuong

Risposte:


835

Si applica solo a Bootstrap 3.

Ignorando le lettere (x s , sm , md , lg ) per ora , inizierò solo con i numeri ...

  • i numeri (1-12) rappresentano una porzione della larghezza totale di qualsiasi div
  • tutti i div sono divisi in 12 colonne
  • quindi, si col-*-6estende su 6 di 12 colonne (metà della larghezza), si col-*-12estende su 12 di 12 colonne (l'intera larghezza), ecc

Quindi, se vuoi che due colonne uguali si estendano su un div, scrivi

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Oppure, se si desidera che tre colonne disuguali si estendano su quella stessa larghezza, è possibile scrivere:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Noterai che il numero di colonne aggiunge sempre fino a 12. Può essere inferiore a dodici, ma fai attenzione se più di 12, poiché i tuoi div offensivi passeranno alla riga successiva (no .row, che è un'altra storia del tutto).

Puoi anche nidificare le colonne all'interno delle colonne , (meglio con un .rowwrapper attorno ad esse) come:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Ogni set di div nidificati comprende inoltre fino a 12 colonne del div genitore. NOTA: poiché ogni .colclasse ha un'imbottitura di 15px su entrambi i lati, di solito dovresti avvolgere le colonne nidificate in a .row, che ha margini di -15px. Ciò evita di duplicare l'imbottitura e mantiene il contenuto allineato tra classi col nidificate e non nidificate.

- Non hai chiesto specificamente xs, sm, md, lgsull'uso, ma vanno di pari passo quindi non posso fare a meno di toccarlo ...

In breve, vengono utilizzati per definire a quale dimensione dello schermo quella classe dovrebbe applicare:

  • xs = schermi extra piccoli (telefoni cellulari)
  • sm = schermi piccoli (tablet)
  • md = schermi medi (alcuni desktop)
  • lg = schermi grandi (desktop rimanenti)

Leggi la " Opzioni griglia " capitolo dalla documentazione ufficiale di Bootstrap per maggiori dettagli.

Di solito dovresti classificare un div usando più classi di colonne in modo che si comporti in modo diverso a seconda delle dimensioni dello schermo (questo è il cuore di ciò che rende reattivo bootstrap). ad es .: un div con classi col-xs-6e col-sm-4coprirà metà dello schermo sul cellulare (xs) e 1/3 dello schermo su tablet (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTA: come da commento qui di seguito, le classi di griglia per una dimensione dello applicano alla dimensione dello schermo e più grande a meno un'altra dichiarazione override (cioè col-xs-6 col-md-4campate 6 colonne su xs esm , e 4 colonne su md elg , anche se sme lgnon sono mai stati esplicitamente dichiarato)

NOTA: se non lo definisci xs, per impostazione predefinita sarà col-xs-12(ovvero col-sm-6metà della larghezza attivata sm,md e lgschermi, ma di grande ampiezza su xsschermi).

NOTA: in realtà va benissimo se .rowincludi più di 12 cols, purché tu sia consapevole di come reagiranno. - Questa è una questione controversa, e non tutti sono d'accordo.


38
Vale anche la pena notare che le classi di griglia per una determinata dimensione dello schermo si applicano a schermi di quelle dimensioni e più grandi , a meno che non vengano ulteriormente ignorati. Ad esempio, .col-xs-2.col-sm-2.col-lg-7equivale a. col-xs-2.col-lg-7
Louvre,

5
È necessario apportare una correzione al proprio esempio per quanto riguarda l'annidamento. L'annidamento richiede l'inserimento di una riga nella colonna in cui annidate le altre colonne all'interno. Non aggiungere una riga ti farà avere una doppia imbottitura. Per una migliore comprensione di questo, vedere il diagramma nella mia risposta qui: stackoverflow.com/questions/23899715/...
jme11

1
spiegazione molto bella, grazie. Amo la punta circa avvolgendo la .colsa .rowevitare e cacel l'imbottitura. Mi chiedevo sempre perché usare la riga e che differenza fa.
Rishiraj Purohit,

Ma nella documentazione sembra che la larghezza totale dei div superi più di 12, fino a 18 per "xs". Dai un'occhiata alla sezione "Misto: mobile e desktop" e perché? getbootstrap.com/docs/3.3/examples/grid
Michel

@Michel sembra che tu abbia frainteso la loro documentazione. stanno mostrando due opzioni x separate: una per 12 colonne (larghezza intera) e una per 6 colonne (mezza larghezza). Vedrai che quelle colonne mostrano anche lg-8 e lg-4 - quello che ti stanno mostrando è che si estenderanno su 8 e 4 colonne (2/3 + 1/3 della larghezza totale della larghezza) su schermi di grandi dimensioni, e 12 e 6 (larghezza intera + 1/2 della riga successiva) sui display del telefono. spero che aiuti!
Shawn Taylor,

47

Il sistema a griglia Bootstrap ha quattro classi:
xs (per telefoni)
sm (per tablet)
md (per desktop)
lg (per desktop più grandi)

Le classi precedenti possono essere combinate per creare layout più dinamici e flessibili.

Suggerimento: ogni classe si ingrandisce, quindi se desideri impostare le stesse larghezze per xs e sm, devi solo specificare xs.

OK, la risposta è semplice, ma continua a leggere:

col-lg- sta per colonna grande ≥ 1200px
col-md- sta per colonna media ≥ 992px
col-xs- sta per colonna extra piccola≥ 768px

I numeri di pixel sono i punti di interruzione, quindi ad esempio col-xssta prendendo di mira l'elemento quando la finestra è più piccola di 768 px (probabilmente i dispositivi mobili) ...

Ho anche creato l'immagine qui sotto per mostrare come funziona il sistema di griglia, in questo esempi che li usano con 3, come col-lg-6per mostrare come il lavoro sistema di griglia nella pagina, sguardo a come lg, mde xssono sensibili alla dimensione della finestra:

Sistema di griglia Bootstrap, col - * - 6


1
col-xs-*sono stati rilasciati in Bootstrap 4 a favore dicol-*
Zohab Ali il

Condivideresti per favore l'HTML (e possibilmente qualsiasi CSS)? Grazie.
NoChance,

11

Il punto principale è questo:

col-lg-* col-md-* col-xs-* col-sm definire quante colonne ci saranno in queste diverse dimensioni dello schermo.

Esempio: se vuoi che ci siano due colonne nelle schermate del desktop e nelle schermate del telefono ne metti due col-md-6e duecol-xs-6 classi nelle tue colonne.

Se vuoi che ci siano due colonne nelle schermate del desktop e solo una colonna nelle schermate del telefono (ovvero due righe sovrapposte l'una sull'altra) metti two col-md-6e due col-xs-12nelle tue colonne e poiché la somma sarà 24, si impileranno automaticamente sopra ciascuna altro, o semplicemente lascia xsfuori lo stile.



6

Ecco qui

col-lg-2: se lo schermo è grande ( lg ), questo componente occuperà spazio di 2 elementi considerando che l'intera riga può contenere 12 elementi (quindi vedrai che su schermo grande questo componente occupa il 16% di spazio di una riga)

col-lg-6: se lo schermo è grande ( lg ), questo componente occuperà spazio di 6 elementi considerando che l'intera riga può contenere 12 elementi - quando applicato vedrai che il componente ha occupato metà dello spazio disponibile nella riga.

La regola sopra è applicata solo quando lo schermo è grande. quando lo schermo è piccolo questa regola viene scartata e viene mostrato un solo componente per riga.

L'immagine sotto mostra varie larghezze dello schermo:

definizioni delle dimensioni dello schermo

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.