如何制作固定高度的Bootstrap面板

Question

我正在使用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>

Answer 1

您可以max-height聯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指定相同的值（以像素或點為單位 - 只要它一致）。

您還可以在樣式表（或style標記，如下所示）中將相同的樣式放在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>

希望這有助於滿足您的需求。

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