如何制作固定高度的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属性中使用,如下所示:

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