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

au9on6nz  于 2022-12-24  发布在  Bootstrap
关注(0)|答案(2)|浏览(342)

我使用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>
flmtquvp

flmtquvp1#

可以在内联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-heightmin-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>
qxgroojn

qxgroojn2#

超文本标记语言:

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

中央支助组:

.panel-height {
  height: 100px; / change according to your requirement/
}

相关问题