Как сделать корпус панели Bootstrap с фиксированной высотой

Я использую 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>

Ответ 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 (либо в пикселях, либо в точках - до тех пор, пока оно не будет согласовано).

Вы также можете поместить те же стили в класс 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>

Надеюсь, что это поможет с вашей потребностью.

Ответ 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/
}