Bootstrap响应式分类卡片布局求助：桌面4张/移动端2张

你的代码已经选对了Bootstrap的栅格类（col-lg-3对应桌面4列，col-md-6对应移动端2列），问题主要在于缺少多卡片示例和基础卡片样式，以下是修正后的完整代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<style>
/* 给卡片添加基础样式，让视觉更清晰 */
.box {
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.blue {
  width: 50px;
  height: 50px;
  background-color: #007bff;
}
.blue img {
  width: 60%;
  filter: brightness(0) invert(1); /* 让白色图标在蓝色背景上显示 */
}
</style>

<div class="categories-main">
  <div class="container bg-light rounded">
    <div class="h4 font-weight-bold text-center py-4">Categories</div>
    <div class="row">
      <!-- 卡片1 -->
      <div class="col-lg-3 col-md-6 my-3">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> 
              <img src="https://cdn-icons-png.flaticon.com/512/134/134072.png" alt="Public Speech"> 
            </div>
            <div class="d-flex flex-column"> 
              <b>Public Speech</b>
              <a href="#" class="text-primary small mt-1">View Courses</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 卡片2 -->
      <div class="col-lg-3 col-md-6 my-3">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> 
              <img src="https://cdn-icons-png.flaticon.com/512/1005/1005141.png" alt="Writing"> 
            </div>
            <div class="d-flex flex-column"> 
              <b>Writing Skills</b>
              <a href="#" class="text-primary small mt-1">View Courses</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 卡片3 -->
      <div class="col-lg-3 col-md-6 my-3">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> 
              <img src="https://cdn-icons-png.flaticon.com/512/2089/2089250.png" alt="Leadership"> 
            </div>
            <div class="d-flex flex-column"> 
              <b>Leadership</b>
              <a href="#" class="text-primary small mt-1">View Courses</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 卡片4 -->
      <div class="col-lg-3 col-md-6 my-3">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> 
              <img src="https://cdn-icons-png.flaticon.com/512/1160/1160127.png" alt="Teamwork"> 
            </div>
            <div class="d-flex flex-column"> 
              <b>Teamwork</b>
              <a href="#" class="text-primary small mt-1">View Courses</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 可以继续添加更多卡片，布局会自动适配 -->
    </div>
    <br>
  </div>
</div>

关键调整说明： #

• 保留col-lg-3 col-md-6：Bootstrap 4中，lg断点（≥992px）下每行4个卡片，md及以下断点（<992px）下每行2个卡片，完全匹配你的需求。
• 补充.box基础样式：添加圆角、内边距和阴影，让卡片更有质感；给.blue类设置宽高和背景色，确保图标容器显示正常。
• 优化间距与结构：用py-4替代py-2加<br>的组合，符合Bootstrap间距规范；移除冗余的重复文本，完善卡片内的链接结构。

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