如何制作固定高度的 Bootstrap Panel 主体

Posted 2023-03-06

【中文标题】如何制作固定高度的 Bootstrap Panel 主体

【英文标题】：How to make Bootstrap Panel body with fixed height

【发布时间】：2014-08-18 10:57:39

【问题描述】：

我正在使用引导程序的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>

【问题讨论】：

请提供一些代码。您可以使用 CSS 中的 height 属性来固定面板的高度。 @user3500605

@JPrakash 这是通用代码，没什么特别的。如何使用高度？

【参考方案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 指定相同的值（以像素或点为单位，只要一致即可）。

您也可以将相同的样式放在样式表中的 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>

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

【讨论】：

我认为内联样式不受欢迎？

高度最小化后。我的标题文本被隐藏。建议解决方案

在我的情况下，我必须明确指定单位，以便浏览器遵守 max-height 值。

为什么将 min-height 和 max-height 设置为相同的值比简单地设置 height 更好？

@sunew：因为他们限制了 div 的范围，因为 height 只是指向确切的值，但没有指定溢出内容时发生的情况

【参考方案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/

【讨论】：

谢谢，但是 Benison 的解决方案更好，所以我只能投票给他的答案 :)