Bootstrap：如何根据容器宽度切换卡片样式适配不同设备？

嘿，这个需求其实用Bootstrap的响应式工具类就能轻松搞定，不用额外折腾JavaScript，给你两种靠谱的实现思路，优先推荐第一种，简洁又高效：

方案一：纯Bootstrap响应式显示/隐藏类（推荐） #

核心思路是把两种布局都写在页面中，利用Bootstrap的d-*系列工具类，根据屏幕尺寸控制对应布局的显示与隐藏。完全靠CSS实现，性能拉满，维护也简单。

具体代码如下：

<!-- 大尺寸设备（lg及以上）显示的卡片布局 -->
<div class="d-none d-lg-block">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">Project One</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
        </div>
      </div>
    </div>
    <!-- 可重复添加更多项目卡片 -->
  </div>
</div>

<!-- 中型及更小尺寸设备（md及以下）显示的左右布局 -->
<div class="d-block d-lg-none">
  <div class="row mb-4"> <!-- mb-4给每个项目加底部间距 -->
    <div class="col-md-7">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-5">
      <h3>Project One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
      <a class="btn btn-primary" href="#">View Project</a>
    </div>
  </div>
  <!-- 可重复添加更多项目布局 -->
</div>

类名说明： #

• d-none d-lg-block：默认隐藏该元素，当屏幕宽度达到lg（992px）及以上时显示
• d-block d-lg-none：默认显示该元素，当屏幕宽度达到lg及以上时隐藏
• 如果想在中型设备（768px）切换布局，只需要把lg改成md即可，比如d-none d-md-block和d-block d-md-none

方案二：自定义CSS媒体查询（适合自定义断点场景） #

如果你的项目需要非Bootstrap默认的断点，或者想更灵活控制样式，可以用CSS媒体查询实现：

首先给两种布局加自定义类：

<!-- 卡片布局 -->
<div class="card-layout">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <!-- 卡片内容和之前一致 -->
    </div>
  </div>
</div>

<!-- 左右布局 -->
<div class="horizontal-layout">
  <div class="row mb-4">
    <!-- 左右布局内容和之前一致 -->
  </div>
</div>

然后添加自定义CSS：

/* 默认显示左右布局，隐藏卡片布局 */
.card-layout {
  display: none;
}
.horizontal-layout {
  display: block;
}

/* 屏幕宽度≥992px时，切换为卡片布局 */
@media (min-width: 992px) {
  .card-layout {
    display: block;
  }
  .horizontal-layout {
    display: none;
  }
}

你可以根据需求修改min-width的值，比如改成768px就是在中型设备切换布局。

额外提示： #

• 两种方案都无需JavaScript，加载更快、用户体验更好
• 如果是多个项目，建议用框架的循环渲染（比如Vue的v-for、React的map）避免重复代码
• 两种布局里的card-img-top和img-fluid已经保证图片适配不同屏幕

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