Html 如何制作固定高度的Bootstrap Panel主体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24450010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap Panel body with fixed height
提问by Bing Lan
I am using bootstrap's panelto display text and image, but as the text grows, the body of the panel also increases. I want to know how to create the body with fixed height, e.g. 10 rows or at most 10 rows. Here is my code:
我正在使用引导程序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>
回答by Benison Sam
You can use max-heightin an inline styleattribute, as below:
您可以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>
To use scrolling with content that overflows a given max-height, you can alternatively try the following:
要对溢出给定的内容使用滚动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>
To restrict the height to a fixed value you can use something like this.
要将高度限制为固定值，您可以使用这样的方法。
<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>
Specify the same value for both max-heightand min-height(either in pixels or in points – as long as it's consistent).
为max-heightand指定相同的值min-height（以像素为单位或以点为单位 - 只要它是一致的）。
You can also put the same styles in css class in a stylesheet (or a styletag as shown below) and then include the same in your tag. See below:
您还可以将 css 类中的相同样式放在样式表（或style如下所示的标签）中，然后在您的标签中包含相同的样式。见下文：
Style Code:
样式代码：
.fixed-panel {
min-height: 10;
max-height: 10;
overflow-y: scroll;
}
Apply Style :
申请风格：
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body fixed-panel">fdoinfds sdofjohisdfj</div>
</div>
Hope this helps with your need.
希望这有助于您的需求。
回答by J Prakash
HTML :
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 :
CSS :
.panel-height {
height: 100px; / change according to your requirement/
}
