Come ottenere l'altezza corretta del Jumbotron Bootstrap?

Ho un esempio molto semplice di un jumbotron bootstrap diviso in 2 parti. La parte sinistra contiene del testo, la parte destra contiene un'immagine:Come ottenere l'altezza corretta del Jumbotron Bootstrap?

<div class="jumbotron"> 
    <div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1> 
    <p>This page would be great if the jumbotron would be higher.</p> 
    </div> 
    <div class="col-md-4"> 
    <img src="//placehold.it/300" class="img-responsive"> 
    </div> 
</div>

Vedi anche my bootply example. Per qualche ragione l'altezza dello sfondo del Jumbotron non è abbastanza grande da contenere il testo e l'immagine. Cosa devo fare per risolvere questo problema?

fonte

2014-06-07 Paul Jansen

Forse un po 'tardi, ma credo che la soluzione sarà Jumbotron e contenitore del liquido

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron container-fluid"> 
 
<div style="clear:both;"> 
 
    Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. 
 

 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. 
 

 
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor. 
 

 
Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl. 
 
    </div> 
 
    <br/> 
 
<div style="clear:both;"> 
 
    Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. 
 

 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. 
 

 
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor. 
 

 
Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl. 
 
    </div>

fonte

2015-07-16 11:37:21 Dinand

Sebbene la classe css "container-fluid" abbia funzionato per l'esempio semplificato, l'altezza del jumbotron nel mio vero sito Web era ancora troppo piccola dopo questa modifica. Questo sembrava essere un bug in Bootstrap 3.0. Dopo un aggiornamento a Bootstrap 3.2 il problema era scomparso. –

Puoi provare ad aggiungere questo al tuo foglio di stile.

.jumbotron { min-height: 600px; }

Inoltre è possibile aggiungere una classe in più al vostro corpo come <body class="test"> e utilizzare questa CSS

test.jumbotron { min-height: 600px; }

È possibile regolare il min-height per misura il vostro contenuto.

fonte

2014-06-07 09:55:46

Grazie per la risposta. Funziona ma mi costringe a regolare l'altezza minima ogni volta che cambio il testo del mio Jumbotron. C'è un modo meno ad hoc per risolvere questo? –

Ecco una soluzione probabile per regolare dinamicamente l'altezza minima in base al contenuto. http://stackoverflow.com/questions/2750892/jquery-set-min-height-of-div –

Ho provato questo e funziona.

È possibile modificare il tag div jumbotron per includere il contenitore della classe css.

Esempio:

<div class="jumbotron container">

fonte

2014-06-07 13:16:34

Grazie Vassoio. Questo è molto meglio, ma questo renderà il Jumbotron più piccolo. –

+1 ottimo suggerimento, ho avuto un problema simile in cui volevo che il jumbotron ridimensionasse dinamicamente, avendo un'immagine impostata sullo sfondo e ora usando 'class =" contenitore jumbotron img-responsive "' e impostando 'height: auto' Ottengo l'effetto desiderato, grazie per il nudge nella giusta direzione. Ora non devo nemmeno preoccuparmi del testo, esso viene dimensionato automaticamente e in modo verticale/orizzontale. –

Si possono verificare soltanto per il Bootstrap 4 ma questo lo ha risolto per me ...

<div class="jumbotron-fluid"></div>

fonte

2016-07-12 00:25:07

sembra che nessuna risposta è la corretta dal momento che tutte le classi container hanno altre proprietà anche in modo che il più pulito dovrebbe essere clearfix in questo modo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron clearfix"> 
 
    <div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1> 
 
<p>This page would be great if the jumbotron would be higher.</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
<img src="//placehold.it/300" class="img-responsive"> 
 
    </div> 
 
</div>

fonte

2017-01-10 14:49:13

Come ottenere l'altezza corretta del Jumbotron Bootstrap?

risposta

Problemi correlati