时间戳

首页 > 解决方案 > Bootstrap 4 div填充问题

css - Bootstrap 4 div填充问题

问题描述

我正在使用这种结构，但是

<div class="row">
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card">
      Your card
    </div>
  </div>
</div>

由于某种原因，它具有与“匹配”水平行中的下一个 div 一样多的填充。例如，如果第一个 div 是文本，那么第二个是文本，第三个是图像……前两个 div “增长”为第三个的大小。我认为这个 Bootstrap 4 应该是灵活的？谢谢。

标签： css

解决方案

Bootstrap 4 将 flexbox (display: flex) 用于很多布局，包括它的卡片。这就是所有卡片都按照它的兄弟姐妹成长的原因。您可以在此处了解有关 flexbox 的更多信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

和

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

推荐阅读