bootstrap 4 - 卡在列中被裁剪

Question

我想用Boostrap 4 alpha 5創建一個網站。問題是，當我使用「卡列」時，它開始看起來很奇怪。卡片在底部被切斷。 我在做什麼錯？我其實直接從bootstrap網站複製代碼。或者它是阿爾法的問題？

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的問題，但已被固定在阿爾法5.您的例子似乎在阿爾法5做工精細：http://www.codeply.com/go/RkafXYSegR

確保有而不是Bootstrap之外的影響卡布局的其他CSS。