如何使Bootstrap面板体固定高度 [英] How to make Bootstrap Panel body with fixed height

问题描述

我使用引导程序的面板显示文本和图像，但随着文本增长，面板的主体也增加。我想知道如何创建固定高度的身体，例如。 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> 
  

解决方案

在样式属性中，如下所示：

$

< div class =panel panel-primary> 
< div class =panel-heading> jhdsahfjhdfhs< / div> 
< div class =panel-bodystyle =max-height：10;> fdoinfds sdofjohisdfj< / div> 
< / div> 
  
要使用滚动内容溢出给定的 max-height ，您也可以尝试以下方法：
 < div class =panel panel-primary> 
< div class =panel-heading> jhdsahfjhdfhs< / div> 
< div class =panel-bodystyle =max-height：10; overflow-y：scroll;> fdoinfds sdofjohisdfj< / div> 
< / div> 
  
要将高度限制为固定值，您可以使用类似的东西。
 < div class =panel panel-primary> 
< div class =panel-heading> jhdsahfjhdfhs< / div> 
< div class =panel-bodystyle =min-height：10; max-height：10;> fdoinfds sdofjohisdfj< / div> 
< / div> 
  
指定 max-height 和 min-height （以像素或点数表示，只要它们一致）。
 
 
 
还在样式表（或如下所示的样式标记）中将相同的样式放在css类中，然后在标记中包含相同的样式。请参阅下文：
 
 
 
 样式代码： 
  .fixed-panel {
 min-height：10; 
 max-height：10; 
 overflow-y：scroll; 
} 
  
 套用样式： 
 $ b 
 < div class =panel panel-primary> 
< div class =panel-heading> jhdsahfjhdfhs< / div> 
< div class =panel-body fixed-panel> fdoinfds sdofjohisdfj< / div> 
< / div> 
  
希望这有助于您的需要。
 
I am using bootstrap's panel to 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:
<div class="span4">
  <div class="panel panel-primary">
    <div class="panel-heading">jhdsahfjhdfhs</div>
    <div class="panel-body">fdoinfds sdofjohisdfj</div>
  </div>
</div>

解决方案
You can use max-height in an inline style attribute, as below:
<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:
<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-height and min-height (either in pixels or in points – as long as it’s consistent).

You can also put the same styles in css class in a stylesheet (or a style tag as shown below) and then include the same in your tag. See below:

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.

                        
这篇关于如何使Bootstrap面板体固定高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！