Le colonne Bootstrap non si allineano correttamente

Ho creato un layout utilizzando Bootstrap 3 e ho il seguente problema: Ho una sezione di notizie che è impostata per visualizzare un totale di 9 notizie, 3 su ogni riga, sumndo 3 righe. Tuttavia, non sembrano allineare correttamente. Si prega di vedere l’immagine qui sotto.

Le colonne non si allineano correttamente

L’html:

Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...
Small article picture
În articolul publicat luni în Financial Times, liderul spiritual turc Fethullah Gülen arată care este...

Il css:

 .small-article-container { margin-top: 1em; } .small-article { /* padding: 0; */ margin-bottom: 1em; padding-right: 0.5em; padding-left: 0.5em; /* float: right; */} .small-category { padding: 0; font-size: 0.9em; } .small-article-img { padding: 0; width: 100%; } .small-article-date { padding: 0; padding-top: 0.5em; font-size: 0.9em; color: #545454; } .small-title { padding: 0; line-height: 1.3em; font-size: 1em; text-transform: uppercase; } .small-excerpt { padding: 0; font-size: 0.9em; } 

Qualcuno potrebbe per favore ascoltarmi su questo? Sto avendo degli incubi a riguardo. Grazie.

Sei così vicino Le classi di colonne hanno l’attributo float impostato negli stili di bootstrap e la tua colonna è mobile, non solo dove ti aspetti. Quella colonna centrale nella prima riga impedisce a quella che vedi fluttuare nello spazio vuoto dal wrapping corretto perché è più alta delle altre. Tutto ciò che devi fare è racchiudere ogni gruppo di 3 di seguito in questo modo:

 
//stuff here
//stuff here
//stuff here
//stuff here
//stuff here
//stuff here
//stuff here
//stuff here
//stuff here

Impostalo in questo modo e sei pronto per partire.

Molto tardi a questa festa, tuttavia, per chiunque altro si imbatta in questo problema:

Come ha detto j.burnette, avvolgere ogni 3 .small-article in una class .row risolverà questo problema.

Invece di aggiungere altro HTML, un approccio solo CSS sarebbe quello di impostare un attributo min-hight per .small-article :

 .small-article { min-height: (height of largest .small-article)px; } 

Ciò dipenderebbe conoscendo l’ height del più .small-article più .small-article e impostandolo come min-height . Dovresti essere in grado di accertarlo in base a come stai generando le tue immagini e il testo di una lunghezza massima.

Se ha bisogno di essere più automatizzato, puoi usare CSS e JS per ottenere l’altezza della casella più alta e quindi applicare l’ min-height alle tue classi .small-article .

Per ragioni di velocità puoi sempre prendere una spina per farlo per te. Ecco un plugin jQuery che uso regolarmente:

jquery.heightMatch.js

Presumo che jQuery sia disponibile poiché stai usando BS3. Non permetto l’uso di plug-in JS per attività così piccole, ma è probabile che avrai da qualche altra parte sul tuo sito questo plugin forse utile per abbinare le altezze

Vecchia domanda, ma ho appena avuto lo stesso problema.

Come @alex menzionato nei commenti, gli sviluppatori di Bootstrap consigliano di usare clearfix per questo. Quel collegamento rimanda a qui , che discute i ripristini di colonna responsive usando un clearfix div .

Invece di inserire un div extra per il clearfix , ho appena selezionato gli elementi nth-of-type , in base al numero di colonne per riga (tre in questo caso) e cancellato il float su quegli elementi. Funziona se tutti gli elementi nella riga hanno la stessa larghezza, il che sembra essere il caso qui. Ha funzionato per me.

Per l’esempio dato dall’OP, il CSS potrebbe apparire in questo modo:

 @media only screen and (@screen-md-min) { .small-article:nth-of-type(3n + 1) { clear: both; } }