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，如下所示：

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

希望这有助于满足您的需求。

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

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

2 个答案: