时间戳

首页 > 解决方案 > 未应用 Bootstrap 4 卡片组等高

html - 未应用 Bootstrap 4 卡片组等高

问题描述

我的问题是 card-deck 的属性（ .card-deck 类创建了一个高度和宽度相等的卡片网格。当您插入更多卡片时，布局会自动调整。）似乎不适用。

这是代码：

<div class="container-fluid"> 
<div class="card-group">
    <div class="card" id="col1m">
        <div class="card-header text-center" style="color: #888" id="display1_title">CAUDAL abcdefghi (BPM)</div>
        <div class="card-body text-center" id="col1">
            <p class="card-text" style="font-family:roboto; font-weight: bold; color:#888" id="display1_value">0</p>
        </div>
    </div>

    <div class="card" id="col2m">
        <div class="card-header text-center" style="color: #888;" id="display2_title">VOL. TOTAL (BBL)</div>
        <div class="card-body text-center" id="col2">
            <p class="card-text" style=" font-family:roboto; font-weight: bold;   color: #888" id="display2_value"> 0 </p>
        </div>
    </div>
</div>
</div>

标签： htmlcssbootstrap-4

解决方案

您的代码末尾有一个关闭 div 和一个开放 div 这是您的代码工作正常

https://codepen.io/growload/pen/QWwMybX?editors=1000

<div class="card-group">

  <div class="card" id="col1m"   >
      <div class="card-header text-center"  style=" color: #888" id="display1_title">CAUDAL (BPM)</div>
      <div class="card-body text-center"   id="col1" >    
      <p class="card-text" style=" font-family:roboto; font-weight: bold;  color: #888"   id="display1_value"> 0  </p>
      </div>
  </div>

<div class="card" id="col2m"  >
      <div class="card-header text-center"  style=" color: #888 ; " id="display2_title"  >VOL. TOTAL (BBL)</div>
      <div class="card-body text-center"   id="col2"   >    
      <p class="card-text" style=" font-family:roboto;    font-weight: bold;   color: #888"   id="display2_value"> 0  </p>
      </div>
  </div>
</div>

推荐阅读