programing

부트스트랩 카드를 카드 기둥에서 높이를 동일하게 만드는 방법은?

cafebook 2023. 9. 25. 23:06
반응형

부트스트랩 카드를 카드 기둥에서 높이를 동일하게 만드는 방법은?

저는 부트스트랩 4알파 2를 사용하고 카드를 이용하고 있습니다.구체적으로, 공식 문서에서 가져온 이 예시를 가지고 작업하고 있습니다.어떻게 하면 모든 카드를 같은 높이로 만들 수 있습니까?

지금까지 내가 생각할 수 있는 것은 다음과 같은 CSS 규칙을 설정하는 것뿐입니다.

.card {
    min-height: 200px;
}

하지만 그것은 일반적인 경우에는 작동하지 않는 하드 코딩 방식의 솔루션일 뿐입니다.제가 보기에 있는 코드는 문서에 있는 코드와 동일합니다.

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

"행"이나 "열"에 수업을 넣을 수 있습니까?행에서 사용하면 카드(국경)에 보이지 않습니다.https://getbootstrap.com/docs/4.6/utilities/flex/ #align-

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

업데이트 BS5 전체 HTML 예제

https://codepen.io/Kerrys7777/pen/QWgwEeG

부트스트랩 4(베타2)를 사용하고 있습니다.그 사이에 상황이 바뀐 것 같습니다.저도 같은 문제가 있어서 쉬운 해결책을 찾았습니다.이게 내 암호입니다.

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

저는 "col-sm-12 col-lg-6"로 카드가 반응하도록 만들었습니다."h-100 카드"로 모든 카드를 부모란 높이로 설정했습니다.내 시스템에서는 이것이 먹히지만, 난 프로가 아닙니다.그래서, 제가 누군가를 도와줬기를 바랍니다.

것을 있습니다: 4 : USE THE.d-flex그리고..flex-fill스 요. 사용하지 마세요.card-decks그들은 반응이 없기 때문입니다.사용했습니다.col-sm, 당신은 사용할 수 있습니다..col당신이 원하는, 혹은 사용하는 수업col-lg-x 열 를 들어, 4개가 잘 볼 수 또는 의 열 수 x합니다. 예를 들어 게시물에 3개 또는 4개가 많을 경우 가장 잘 볼 수 있도록 4개 또는 3개를 의미합니다.

브라우저 창을 XS로 축소하여 실행해 보십시오.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

를 .h-100를 100%

제가 한 방법은 이렇습니다.

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

업데이트: 부트스트랩 4에서 플렉스박스는 이제 기본값이며, 각각card-deck행에는 3장의 카드가 들어있습니다.카드가 최대 높이까지 채워질 것입니다.

http://codeply.com/go/x91w5Cl6ip

4card-columns는 동일한 높이를 지원하지 않는 CSS3 열을 사용합니다(Firefox에서만 지원되는 열 채우기는 제외).

4 할 수 card-deck3열마다 높이와 랩을 동일하게 하기 위한 작은 CSS.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

관련된
부트스트랩 4 열에 같은 높이의 카드 4장

카드데크를 사용하면 모든 카드가 정렬됩니다.이것은 부트스트랩 4 공식 페이지에서 나온 것입니다.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

저는 조금 다른 접근법을 취했습니다.카드 데크 포장지 사용

카드 블록의 높이를 제한하는 스타일 규칙을 추가했습니다.

.card .card-block {max-height:300px;overflow:auto;}

이를 통해 다음과 같은 결과를 얻을 수 있습니다.

카드를 안에 싸다

<div class="card-group"></div>

아니면

<div class="card-deck"></div>

또 다른 유용한 접근 방식은 카드 그리드입니다.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

이것이 당신을 도울수 있습니다.

이 코드를 따라가면 됩니다.

<div class="row">
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
</div>

부트스트랩 클래스 "h-100"을 사용합니다.

추가할 수 있습니다.d-flex and flex-column와 함께 디브에card-body.

작동 예는 다음과 같습니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
          <p class="text-muted">Lorem ipsum dolor </p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">consectetur adipiscing elit</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Smaller title here that wraps 1 line</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">adipiscing </p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps 3 lines, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

제가 초보자라서 혹시라도 부족한 부분이 있으면 용서해주세요.

저는 위의 많은 것들을 시도했습니다.높이 = 100%로 설정하면 항상 가장 긴 카드의 최대 길이로 카드가 확장됩니다.컨테이너는 모두 동일한 길이로 제한합니다.

용기를 보고 싶어서 배경색을 사용해서 무슨 일인지 확인할 수 있게 도와줬어요.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

부트스트랩 5 및 4의 경우

HIGHITE - class="card-deck"로 모든 카드를 div에 입력합니다.

WIDTH - 모든 카드 스타일 {min-width: 50ch} 제공

<div class='row'>
  <div class="col-xs-12 d-flex align-items-stretch"></div>
</div>

이를 달성하기 위한 가장 최소한의 방법은 다음과 같습니다.

  • 적용합니다..text-monospace카드에 있는 모든 문자에.
  • 카드의 모든 텍스트를 동일한 숫자의 문자로 제한합니다.

갱신하다

더하다.text-truncate카드의 제목이나 기타 텍스트에 표시됩니다.이렇게 하면 텍스트가 한 줄로 강제로 이동됩니다.카드를 만드는 것은 키가 같습니다.

제가 질문한 것에 의하면 그것이 당신에게 도움이 될 수 있고 당신은 그것을 사용할 수 있습니다.그냥 쓰시면 됩니다.height속성을 지정하여 다음과 같이 설정합니다.height: 100vh;사용했습니다.70vh그리고 카드는 당신이 준 높이가 고정될 것입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Bootstrap 4.5 CSS-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

      <!-- Bootstrap JS Requirements -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
          crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
          integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
          crossorigin="anonymous"></script>
      <link rel="stylesheet" href="index.css">
      <title>Document</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style>
      /*Use height property to set equil card height*/
      .card {
          background-color: #56568a;
          margin: 10px !important;
          height: 70vh;
          width: auto;
      }
  </style>
  <body>
      <div class="container">
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img5.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> Product Launch</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text "><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">Today</small>
                      </p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img6.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> ddc</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text"><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">2 days ago</small>
                      </p>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

flex-align의 기본값이 스트레치이므로 카드 항목 높이가 400px(내용에 따라)인 경우 .card-item(행 또는 카드 모음 클래스의 자식)이 스트레치됩니다.카드의 높이를 부모의 100%로 만들면 이 전체 높이를 차지합니다.

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

설정 가능합니다.$card-height: 100%Sass에서.null기본적으로

이것은 아주 간단합니다.당신은 단지 그 안에h-100카드위의 수업.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">In exercitation voluptate consectetur velit eiusmod sint minim duis cillum minim nisi aliqua. Id dolore enim laboris exercitation qui magna reprehenderit. Ad irure pariatur enim officia dolor irure adipisicing magna. Anim ullamco qui quis ullamco sint aliquip id culpa non nulla cupidatat consequat ex sit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Sint tempor velit anim eiusmod. Laborum minim aliquip eu adipisicing cillum cupidatat elit excepteur.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Dolore labore esse mollit in nostrud adipisicing velit in amet exercitation incididunt minim. Voluptate elit consectetur culpa fugiat elit enim incididunt magna officia esse. Nulla est duis in enim id consequat cupidatat dolor eu elit velit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>

코드펜 예제 참조

이 방법은 제게 잘 통했습니다.

<div class="card card-body " style="height:80% !important">

부트스트랩 일반 CSS에 CSS를 강제합니다.

관심 있는 사람이 있다면 jquery.matchHeight.js라는 jquery 플러그인이 있습니다.

https://github.com/liabru/jquery-match-height

matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킵니다.유사한 플러그인에 장애가 발생하는 많은 에지 케이스를 처리합니다.

카드열의 경우 다음을 사용합니다.

<div class="row match-height">

그런 다음 사이트 전체에서 활성화:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

CSS로 원하는 높이를 추가하면 됩니다. 예:

.card{
    height: 350px;
}

당신은 당신 자신의 CSS를 추가해야 할 것입니다.

설명서를 확인해 보면, 이것은 Masonry 스타일에 대한 것입니다. 요점은 이것들이 모두 같은 높이가 아니라는 것입니다.

언급URL : https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-cards-the-same-height-in-card-columns

반응형

'programing' 카테고리의 다른 글

setWebViewClient와 setWebChrom Client의 차이점은 무엇입니까?  (0) 2023.09.25
USING 인덱스 절  (0) 2023.09.25
wp-cli를 통해 워드프레스 번역을 업데이트하는 방법  (0) 2023.09.25
array.prototype.에는 vs.배열.원형.indexOf  (0) 2023.09.25
TEXT 형식의 열을 VARCHAR로 변환하는 방법은?  (0) 2023.09.25

'programing'의 다른글

  • 현재글부트스트랩 카드를 카드 기둥에서 높이를 동일하게 만드는 방법은?

관련글

댓글

티스토리툴바