【问题标题】:Bootstrap 4 card-deck equal height is not being applied未应用 Bootstrap 4 卡片组等高
【发布时间】:2019-12-28 22:58:40
【问题描述】:

我的问题是 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>

【问题讨论】:

  • 这里的关闭&lt;/div&gt;标签比打开&lt;div&gt;标签要多。这可能是问题的一部分吗?
  • 实际上,通过检查jsfiddle.net/hftsrk26 您的代码,它似乎可以正常工作...

标签: html css bootstrap-4


【解决方案1】:

您的代码末尾有一个结束 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>

【讨论】:

  • im sorry. I add the first line of the code, &lt;div class="container-fluid"&gt;. On the other hand, I did a test with codepen.io and it works fine. Im 将做一些测试以找出为什么它在使用服务器或本地主机进行测试时会有所不同。谢谢!
猜你喜欢
  • 2020-10-04
  • 2021-06-05
  • 2017-04-02
  • 2017-07-27
  • 2020-10-03
  • 1970-01-01
  • 2018-08-06
  • 2020-12-03
  • 2023-01-13
相关资源
最近更新 更多