html - 如何制作固定高度的 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

您可以在内联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 类中，然后将其包含在您的标签中。见下文:

样式代码:

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

希望这对您的需求有所帮助。