Bootstrap 4 카드를 카드 열에서 같은 높이로 만드는 방법은 무엇입니까?

저는 Bootstrap 4 alpha 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://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

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

여기에있는 다른 답변 중 일부는 '엉뚱한'것 같습니다. 최소 높이를 사용하거나 고정 높이를 더 나쁜 이유는 무엇입니까?

나는이 문제 (동일한 높이)가 부동 블록 div에서 진행되는 이유의 일부라고 생각했습니다.

부트 스트랩 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"을 사용하여 모든 카드를 부모 열의 높이로 설정했습니다. 내 시스템에서는 작동하지만 나는 전문가가 아닙니다. 그래서 누군가를 도왔 으면 좋겠습니다.

최고의 솔루션 인 Bootstrap 4에는 USE THE .d-flex와 .flex-fill클래스 가 모두 있습니다 . card-decks응답하지 않으므로을 사용하지 마십시오 . 나는 사용했다 col-sm, 당신은 .col당신이 원하는 클래스를 사용할 수 있습니다 , 또는 col-lg-xx는 너비 열의 수를 의미합니다. 예를 들어 게시물에 열당 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 %를 의미 하는 클래스를 적용 할 수 있습니다 .

UPDATE : 에서 부트 스트랩 4 , 인 flexbox는 기본적되며, 각 card-deck행은 3 개 카드를 포함합니다. 카드가 전체 높이로 채워집니다.

http://www.codeply.com/go/x91w5Cl6ip

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

대신 Bootstrap 4 flexbox 모드를 활성화하는 경우 대신 card-deck및 약간의 CSS를 사용하여 높이를 동일하게하고 3 개 열마다 래핑 할 수 있습니다.

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

http://codeply.com/go/YFFFWHVoRB

Col에서 같은 높이의 관련
부트 스트랩 카드

내가 한 방법은 다음과 같습니다.

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>

안에 카드를 싸다

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

또는

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

나는 약간 다른 접근 방식을 취했습니다. 은 Using 카드 덱 래퍼를

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

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

결과는 다음과 같습니다.

카드 데크를 사용할 수 있으며 모든 카드를 정렬합니다. 이것은 부트 스트랩 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>

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

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

이것을 달성하는 가장 최소한의 방법 (내가 알고있는) :

• .text-monospace카드의 모든 텍스트에 적용 됩니다.
• 카드의 모든 텍스트를 동일한 문자 수로 제한하십시오.

최신 정보

.text-truncate카드의 제목 및 기타 텍스트를 추가하십시오 . 이것은 텍스트를 한 줄로 강제합니다. 카드를 같은 높이로 만듭니다.

나는 이것에 초보자이므로 모두 함께 놓친 것이 있으면 용서하십시오.

나는 위의 많은 것을 시도했습니다. 높이를 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>

이것은 나를 위해 잘 작동했습니다.

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

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

나는이 문제를 만났고 대부분의 사람들은 jQuery를 사용합니다. 여기 내 해결책이 있습니다. "괜찮아요, 난 그냥 초보자 일뿐 ..."

.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

카드 항목 높이가 예를 들어 400px (내용 기준)이면 flex-align의 기본값이 stretch이므로 .card-item (행 또는 카드 컬렉션 클래스의 자식)이 늘어납니다. 카드의 높이가 부모의 100 %가되도록하면이 전체 높이를 차지합니다.

내가 옳았기를 바랍니다. 내가?

관심이 있다면 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 스타일에 대한 것 입니다. 요점은 모두 같은 높이가 아니라는 것입니다.