卡片作物引导程序 4 [英] Cards crops bootstrap 4

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

问题描述

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

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

<div class="card"><div class="card-header">taras.shpachenko@yandex.ru</div><div class="card-block"><p class="card-text">werewrwekek</p>
<div class="card-footer"></div>

<div class="card"><div class="card-header">taras.shpachenko@yandex.ru</div><div class="card-block"><p class="card-text">werewrwekek</p>

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

<div class="card"><div class="card-header">taras.shpachenko@yandex.ru</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">taras.shpachenko@yandex.ru</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">taras.shpachenko@yandex.ru</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">taras.shpachenko@yandex.ru</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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆