부트 스트랩 4 - 카드가 열로 잘린 경우

Question

Boostrap 4 alpha 5로 웹 사이트를 구축하려고합니다. "카드 열"을 사용할 때 이상하게 보입니다. 카드는 하단에서 잘립니다. 내가 뭘 잘못하고 있니? 실제로 부트 스트랩 웹 사이트에서 직접 코드를 복사했습니다. 아니면 알파의 문제입니까? http://www.codeply.com/go/RkafXYSegR

이 있는지 확인하십시오 : 5. 예를 알파 5에서 잘 작동하는 것 같다

http://imgur.com/a/28Xuu

<div class="card-columns"> 
<div class="card"> 
    <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"> 
    <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 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>' 

Answer 1

이 알파 4 caused the card columns to become cropped 점에서 문제가 있었다,하지만 그 알파에서 수정되었습니다 카드 레이아웃을 수행하는 다른 CSS가 아닌 부트 스트랩.