높이가 고정 된 부트 스트랩 패널 본체를 만드는 방법

높이가 고정 된 부트 스트랩 패널 본체를 만드는 방법

---

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>

---

다음과 같이 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(일관된 한 픽셀 또는 포인트 단위).

스타일 시트 (또는 style아래 표시된 태그)의 css 클래스에 동일한 스타일을 넣은 다음 태그 에 동일한 스타일을 포함 할 수도 있습니다 . 아래를 참조하십시오.

스타일 코드 :

.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>

이것이 귀하의 필요에 도움이되기를 바랍니다.

---

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/
}

참고 URL : https://stackoverflow.com/questions/24450010/how-to-make-bootstrap-panel-body-with-fixed-height