如何在Bootstrap响应式行的小屏幕上为卡片添加间距？

给你几个简单易上手的方案，适合前端新手：

方案1：用Bootstrap自带间距类（推荐） #

直接给每个包含卡片的列（col-*）添加mb-3类，这个类会给元素设置底部外边距，小屏幕卡片堆叠时自动产生上下间距，大屏并排时不影响左右布局。

修改后的HTML示例：

<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
    <div class="card illustration-img">
      <img src="..." alt="...">
      <div class="card-body">
        <p class="card-text">We got some text here</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
    <div class="card illustration-img">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">We have text here</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">We have text here</p>
      </div>
    </div>
  </div>
</div>

如果想让中屏及以上（大屏）去掉底部间距，可改用mb-3 mb-md-0，意思是默认加底部间距，到md断点（≥768px）时取消。

方案2：自定义CSS（适合需要更灵活间距的情况） #

添加媒体查询，只在小屏幕时给卡片或列加上下间距：

/* 针对小于768px的屏幕（小屏幕） */
@media (max-width: 767px) {
  /* 给每个列加底部间距 */
  .col-sm-12 {
    margin-bottom: 1.5rem; /* 间距大小可自行调整 */
  }
  /* 或者直接给卡片加 */
  .col-sm-12 .card {
    margin-bottom: 1.5rem;
  }
}

这个方法不用改HTML，直接在现有CSS里加这段代码就行。

补充说明 #

你现有.illustration-img的CSS只设置了左右padding，没涉及上下间距，所以不管用哪个方案，都能和现有样式兼容，不会冲突。

内容的提问来源于stack exchange，提问作者nlpat016