L’immagine del carosello Bootstrap non si allinea correttamente

Si prega di dare un’occhiata alla seguente immagine, stiamo usando il carosello di bootstrap per ruotare le immagini. Tuttavia, quando la larghezza della finestra è grande, l’immagine non si allinea correttamente con il bordo.

Ma l’esempio di carousel fornito da bootstrap funziona sempre bene, indipendentemente dalla larghezza della finestra. Seguendo il codice.

Qualcuno può spiegare perché la giostra si comporta in modo diverso? Questo qualcosa ha a che fare con la dimensione dell’immagine o con qualche configurazione di bootstrap mancante?

immagine della giostra

La soluzione è di inserire quel codice CSS nel tuo file css personalizzato

.carousel-inner > .item > img { margin: 0 auto; }

Con bootstrap 3, aggiungi solo le classi responsive e center:

  First slide 

Questo automaticamente ridimensiona le immagini e centra l’immagine.

Modificare:

Con bootstrap 4, aggiungi la class img-fluid

  

Ho affrontato lo stesso problema e l’ho risolto in questo modo: è ansible inserire contenuto non immagine in Carousel, quindi possiamo utilizzarlo. Dovresti prima inserire div.inner-item (dove realizzerai l’allineamento centrale), e quindi inserire l’immagine all’interno di questo div.

Ecco il mio codice (Ruby):

  

E il mio codice css (.scss):

 .inner-item { text-align: center; img { margin: 0 auto; } } 

Mentre la risposta di vekozlov funzionerà in Bootstrap 3 per centrare l’immagine, si interromperà quando la giostra viene ridimensionata: l’immagine mantiene le sue dimensioni invece di ridursi con la giostra.

Invece, fallo sul div carosello di livello superiore:

  

Questo centrerà l’intero carosello e impedirà che cresca oltre la larghezza delle immagini (ad esempio 900 px o qualsiasi altra cosa tu desideri impostare). Tuttavia, quando il carosello viene ridimensionato, le immagini scendono verso il basso con esso.

Dovresti inserire queste informazioni sullo styling nel tuo file CSS / LESS, ovviamente.

Potrebbe avere qualcosa a che fare con i tuoi stili. Nel mio caso, sto usando un link all’interno del div “item” principale, quindi ho dovuto cambiare il mio foglio di stile per dire quanto segue:

 .carousel .item a > img { display: block; line-height: 1; } 

sotto il codice boostrap preesistente:

 .carousel .item > img { display: block; line-height: 1; } 

e la mia immagine assomiglia a:

 

Penso di avere una soluzione:

Nella pagina del foglio di stile personale, assegna la larghezza e l’altezza in modo che corrispondano alle dimensioni dell’immagine.

Crea un’ulteriore “class” separata su quel div principale che si appropria dello spazio con span … (vedi sotto)

  

Senza toccare il file bootstrap.css, nel proprio foglio di stile, chiama “carosello” (o qualsiasi altra etichetta tu scelga) in modo che corrisponda alla larghezza e all’altezza del tuo pix originale!

 .carousel { width: 320px; height: 200px; 

}

Quindi, nel mio caso, sto usando piccole immagini 320×200 con carosello. Probabilmente ci sono dimensioni preimpostate nel bootstrap.css, ma non mi piace cambiarlo, così posso provare a rimanere aggiornato con le versioni future. Spero che questo aiuti ~~

Prova questo

  .item img{ max-height: 300px; margin: auto; } 

Le tue immagini hanno esattamente una larghezza di 460px come span6? Nel mio caso, con diverse dimensioni di immagine, inserisco un attributo height sulle mie immagini per assicurarmi che siano tutte della stessa altezza e che il carosello non venga ridimensionato tra le immagini.

Nel tuo caso, prova ad impostare un’altezza in modo che il rapporto tra questa altezza e la larghezza del div carousel-inner sia lo stesso di aspectRatio delle tue immagini

@Art La soluzione di L. Richards non ha funzionato. ora in bootstrap.css, il codice originale è diventato così.

 .carousel .item > img { display: block; line-height: 1; } 

Il codice di @rnaka530 romperebbe la fluida funzionalità del bootstrap.

Non ho una buona soluzione, ma ho risolto il problema. Ho osservato molto attentamente l’esempio del carosello del bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel .

Scopro che la larghezza dell’immagine deve essere maggiore della larghezza della griglia. In span9 , la larghezza è fino a 870px, quindi devi preparare un’immagine più grande di 870px. Se hai più contenitore all’esterno dell’img, dato che tutto il contenitore ha qualcosa di bordo o margine, puoi usare l’immagine con una larghezza minore.

Per il carosello, credo che tutte le immagini debbano essere esattamente della stessa altezza e larghezza.

Inoltre, quando si fa riferimento alla pagina di scaffolding da bootstrap, sono abbastanza sicuro che span16 = 940px. Con questo in mente, penso che possiamo supporre che se ne hai uno

 

Quindi sì, bisogna stare attenti quando si imposta lo spazio span all’interno di una riga perché se la larghezza dell’immagine è troppo grande, invierà il div alla successiva “riga” e non è divertente: P

Link 1

Inseriscilo nella class div css parent dove si trova il tuo carosello.

 

CSS

 .parent_div { margin: 0 auto; min-width: [desired width]; max-width: [desired width]; } 

Sto affrontando lo stesso problema con te. Sulla base del suggerimento di @thuliha, i seguenti codici hanno risolto i miei problemi.

Nel file html , modifica come nell’esempio seguente:

 Third slide 

In carousel.css , modifica la class:

 .carousel .item { text-align: center; height: 470px; background-color: #777; }