web-dev-qa-db-fra.com

Comment faire Bootstrap Corps du panneau à hauteur fixe

J'utilise panel de bootstrap pour afficher du texte et des images, mais à mesure que le texte grandit, le corps du panneau augmente également. Je veux savoir comment créer le corps avec une hauteur fixe, par exemple. 10 lignes ou au plus 10 lignes. Voici mon code:

<div class="span4">
  <div class="panel panel-primary">
    <div class="panel-heading">jhdsahfjhdfhs</div>
    <div class="panel-body">fdoinfds sdofjohisdfj</div>
  </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3
59
Bing Lan

Vous pouvez utiliser max-height dans un attribut inline style, comme ci-dessous:

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

Pour utiliser le défilement avec un contenu dépassant un max-height donné, vous pouvez également essayer les opérations suivantes:

<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>

Pour limiter la hauteur à une valeur fixe, vous pouvez utiliser quelque chose comme ceci.

<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>

Spécifiez la même valeur pour max-height et min-height (en pixels ou en points - tant que cela est cohérent).

Vous pouvez également placer les mêmes styles dans la classe css dans une feuille de style (ou une balise style comme indiqué ci-dessous), puis les inclure dans votre balise. Voir ci-dessous:

Code de style:

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

Appliquer le style:

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

J'espère que cela aide avec votre besoin.

126
Benison Sam

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/
}
20
J Prakash