it-swarm.com.de

Wie macht man Bootstrap Panel Körper mit fester Höhe

Ich verwende panel von bootstrap, um Text und Bild anzuzeigen, aber wenn der Text wächst, vergrößert sich auch der Körper des Bedienfelds. Ich möchte wissen, wie man den Körper mit fester Höhe erzeugt, z. 10 Reihen oder höchstens 10 Reihen. Hier ist mein Code:

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

Sie können max-height In einem Inline-style-Attribut wie folgt verwenden:

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

Um das Scrollen mit Inhalten zu verwenden, die einen bestimmten max-height Überschreiten, können Sie alternativ Folgendes versuchen:

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

Um die Höhe auf einen festen Wert zu beschränken, können Sie so etwas verwenden.

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

Geben Sie den gleichen Wert für max-height Und min-height An (entweder in Pixel oder in Punkten - sofern dies konsistent ist).

Sie können die gleichen Stile auch in einer CSS-Klasse in ein Stylesheet (oder ein style -Tag, wie unten gezeigt) einfügen und dieses dann in Ihr Tag einschließen. Siehe unten:

Style-Code:

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

Stil anwenden:

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

Hoffe das hilft bei deinem Bedarf.

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