Bootstrap Card溢出

Question

目前，当我使用Bootstrap卡时，当我降低浏览器的高度时，文本会像这样溢出

​

​

我怎样才能阻止它溢出

代码

<div class="col-lg-6">
  <div class="card card-inverse card-primary" style="height: 30vh">
    <div class="card-block" style="text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;">
      <div class="display-4" style="font-size: 2rem">PERCEIVED Five (5) Year Cost of Ownership</div>
      <div class="display-3">
        {{captital | currency:'USD':true:'1.2-2'}}
        <i class="fa fa-info-circle" style="font-size: 50%"></i>
      </div>
    </div>
  </div>
</div>

Answer 1

删除style="height: 30vh"，或将其设置为style="min-height: 30vh“。当它消耗超过视口高度的30%时，会导致卡溢出。

如果您使用的是最新版本4.0.0，则card-primary、card-inverse或card-block将不复存在。这是简化卡..。

https://www.codeply.com/go/HCqODdTnru

<div class="card text-white bg-primary" style="min-height: 30vh">
     <div class="card-body text-center justify-content-center">
         <div class="display-4" style="font-size: 2rem">PERCEIVED Five (5) Year Cost of Ownership</div>
         <div class="display-3">
                        $10,000
                        <i class="fa fa-info-circle" style="font-size: 50%"></i>
         </div>
         <small class="text-light">
                 ..
         </small>
     </div>
</div>