[解決済み] 高さを固定したBootstrapパネルボディの作り方

質問

私は、ブートストラップの panel を使用してテキストと画像を表示していますが、テキストが大きくなるとパネルの本体も大きくなります。10行とか最大10行とか、高さが固定された本体を作る方法を知りたいです。 以下は私のコードです。

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

解決方法は？

を使用することができます。 max-height インラインの style 属性を使用します。

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

をオーバーフローするコンテンツでスクロールを使用するには、以下のようにします。 max-height を使用すると、代わりに次のように試すことができます。

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

高さを固定値に制限するには、次のような方法があります。

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

の両方に同じ値を指定します。 max-height と min-height (ピクセル単位でもポイント単位でも、一貫性がある限り)。

また、同じスタイルをスタイルシートのcssクラス（または style タグを作成し、そのタグに同じ内容を記述します。以下を参照してください。

スタイルコードです。

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

スタイルを適用する :

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

これがあなたの必要性に役立つことを願っています。