web-dev-qa-db-ja.com

高さを固定したブートストラップパネルボディの作り方

ブートストラップの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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
58
Bing Lan

以下のように、インラインstyle属性でmax-heightを使用できます。

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

これがあなたのニーズに役立つことを願っています。

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