ブートストラップ4 - カードが列で切り取られる

Question

私はBoostrap 4 alpha 5でウェブサイトを構築しようとしています。問題は、 "card-columns"を使うと奇妙に見えることです。カードは底部で切り取られます。 私は何が間違っていますか？私は実際にブートストラップのウェブサイトからコードを直接コピーしました。それともアルファの問題ですか？ 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はありません。