如何按窗口宽度条件切换运行不同的Bootstrap 5卡片代码块

方案1：CSS响应式控制（推荐） #

这是最简单稳定的实现方式，无需写JS，直接通过媒体查询控制两个卡片的显隐：

1. 先添加自定义CSS规则，用于区分不同屏幕下的显隐：

/* 屏幕宽度≤499px时的显隐规则 */
@media (max-width: 499px) {
  .card-lg { display: none !important; }
  .card-sm { display: block !important; }
}
/* 屏幕宽度≥500px时的显隐规则 */
@media (min-width: 500px) {
  .card-lg { display: block !important; }
  .card-sm { display: none !important; }
}

2. 把两个卡片代码都放入页面，分别加上对应的类名即可：

<!-- 宽度≥500px时显示的卡片 -->
<div class="card-lg card text-center d-inline-block m-2" style="width: 13rem;" >
   <img src=".." class="card-img-top" alt="...">
   <div class="card-body">
       <h5 class="card-title" style="font-size: 1rem;">name</h5>
       <p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
       <a href="#" class="btn btn-primary" style="font-size: 0.9rem;">watch</a>
    </div>
</div>

<!-- 宽度≤499px时显示的卡片 -->
<div class="card-sm card mb-3" style="max-width: 540px;">
     <div class="row g-0">
<div class="col-md-4">
  <img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

方案2：JS动态加载 #

如果你不想初始页面加载两个卡片DOM节点，可以用JS动态渲染对应卡片：

1. 先在页面中放一个容器用于承载卡片：

<div id="card-wrap"></div>

2. 添加JS逻辑实现动态切换：

// 定义两个卡片的HTML模板
const desktopCard = `
<div class="card text-center d-inline-block m-2" style="width: 13rem;" >
   <img src=".." class="card-img-top" alt="...">
   <div class="card-body">
       <h5 class="card-title" style="font-size: 1rem;">name</h5>
       <p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
       <a href="#" class="btn btn-primary" style="font-size: 0.9rem;">watch</a>
    </div>
</div>
`
const mobileCard = `
<div class="card mb-3" style="max-width: 540px;">
     <div class="row g-0">
<div class="col-md-4">
  <img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
`
// 渲染对应卡片
function loadCard() {
  const wrap = document.getElementById('card-wrap')
  wrap.innerHTML = window.innerWidth >= 500 ? desktopCard : mobileCard
}
// 页面加载时执行
loadCard()
// 监听窗口大小变化自动切换
window.addEventListener('resize', loadCard)

普通场景优先用方案1即可，实现简单不会出现JS加载的闪烁问题。

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