本文介绍了卡片作物引导程序 4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

卡片列中的引导卡会阻止裁剪,如何禁用它?

这是截图.http://piccy.info/view3/10286069/ca22a528ba433ab5b054e>

<div class="card"><div class="card-header">[email protected]</div><div class="card-block"><p class="card-text">werewrwekek</p>

<div class="card-footer"></div>

<div class="card"><div class="card-header">[email protected]</div><div class="card-block"><p class="card-text">werewrwekek</p>

<div class="card-footer"></div>

<div class="card"><div class="card-header">[email protected]</div><div class="card-block"><p class="card-text">werewrwekek</p>

<div class="card-footer"></div>

解决方案

这是 alpha 4 中引入的已知问题:https://github.com/twbs/bootstrap/issues/20654

看起来它会在 alpha 5 中修复.

解决方法是使用..

.card-columns .card {显示:内联块;宽度:100%;}

Bootstrap cards inside card-columns block crops, how to disable it?

Here is screenshot.http://piccy.info/view3/10286069/ca22a528ba433ab5b05119bb1d4e1fea/

<div class="card-columns">
  <div class="card">
    <div class="card-header">[email protected]</div>
    <div class="card-block">
      <p class="card-text">werewrwekek</p>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-header">[email protected]</div>
    <div class="card-block">
      <p class="card-text">werewrwekek</p>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-header">[email protected]</div>
    <div class="card-block">
      <p class="card-text">werewrwekek</p>
    </div>
    <div class="card-footer"></div>
  </div>
</div>
解决方案

This is a known issue introduced in alpha 4: https://github.com/twbs/bootstrap/issues/20654

Looks like it will be fixed for alpha 5.

The workaround is to use..

.card-columns .card {
    display: inline-block;
    width:100%;
}

这篇关于卡片作物引导程序 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 16:43