Cards crops bootstrap 4

偶尔善良 提交于 2019-11-28 12:34:47

问题


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>

回答1:


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%;
}


来源:https://stackoverflow.com/questions/39531511/cards-crops-bootstrap-4

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!