Come rendere il corpo del pannello Bootstrap ad altezza fissa

Question

Sto usando il bootstrap panel per visualizzare testo e immagine, ma man mano che il testo aumenta, aumenta anche il corpo del pannello. Voglio sapere come creare il corpo con altezza fissa, ad es. 10 file o al massimo 10 righe. Ecco il mio codice:

<div class="span4"> 
    <div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body">fdoinfds sdofjohisdfj</div> 
    </div> 
</div> 

Answer 1

È possibile utilizzare max-height in un attributo inline style, come di seguito:

<div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body" style="max-height: 10;">fdoinfds sdofjohisdfj</div> 
</div> 

Per utilizzare lo scorrimento con il contenuto che trabocca un dato max-height, in alternativa è possibile effettuare le seguenti operazioni:

<div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body" style="max-height: 10;overflow-y: scroll;">fdoinfds sdofjohisdfj</div> 
</div> 

Per limitare l'altezza a un valore fisso è possibile utilizzare qualcosa di simile.

<div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body" style="min-height: 10; max-height: 10;">fdoinfds sdofjohisdfj</div> 
</div> 

specificare lo stesso valore sia per max-height e min-height (in pixel o punti - fino a quando è coerente).

È inoltre possibile inserire gli stessi stili nella classe css in un foglio di stile (o in un tag style come mostrato di seguito) e quindi includere lo stesso nel tag. Vedi sotto:

Codice di stile:

.fixed-panel { 
    min-height: 10; 
    max-height: 10; 
    overflow-y: scroll; 
} 

Applica stile:

<div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body fixed-panel">fdoinfds sdofjohisdfj</div> 
</div> 

Spero che questo aiuti con il vostro bisogno.

Answer 2

HTML:

<div class="span4"> 
    <div class="panel panel-primary"> 
    <div class="panel-heading">jhdsahfjhdfhs</div> 
    <div class="panel-body panel-height">fdoinfds sdofjohisdfj</div> 
    </div> 
</div> 

CSS:

.panel-height { 
    height: 100px;/change according to your requirement/ 
}