it-swarm.com.ru

Как сделать 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>
58
Bing Lan

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

Надеюсь, это поможет вам.

125
Benison Sam

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/
}
19
J Prakash