如何根据屏幕尺寸动态切换Bootstrap的Card与Accordion组件

Bootstrap 没有原生提供「根据屏幕尺寸自动切换Card/Accordion组件形态」的开箱能力，不需要编写复杂逻辑，仅需少量JS配合Bootstrap自带的响应式断点、Collapse组件就能实现效果，无需引入额外依赖。

基于Bootstrap默认的lg响应式断点（阈值992px，可根据需求自行调整）做形态区分：

• 桌面端（视口宽度≥992px）：展示水平排列的Card组件，所有内容默认展开，保留原有横向浏览体验
• 移动端（视口宽度<992px）：展示Accordion组件，默认仅展开首个内容块，支持点击折叠/展开，解决移动端长文本必须滚动完前一整块才能查看下一块内容的问题

方案1：单套DOM+少量JS动态切换（推荐，维护成本低） #

不需要编写两套重复的内容结构，通过JS监听视口断点变化，动态切换元素类名与交互属性，后续修改内容只需要维护一处。

1. 基础DOM结构

<div class="g-3" id="responsiveContainer">
  <!-- 单个内容块，可按需求重复添加多个 -->
  <div class="component-item">
    <div class="component-header">
      <h5 class="component-title m-0">卡片标题1</h5>
    </div>
    <div class="component-content">
      <p>卡片长文本内容1</p>
    </div>
  </div>
  <div class="component-item">
    <div class="component-header">
      <h5 class="component-title m-0">卡片标题2</h5>
    </div>
    <div class="component-content">
      <p>卡片长文本内容2</p>
    </div>
  </div>
</div>

2. 响应式样式（基于Bootstrap原生变量扩展，原生CSS可直接使用）

/* 桌面端样式 */
@media (min-width: 992px) {
  #responsiveContainer {
    display: flex;
  }
  .component-item {
    flex: 1;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .375rem;
  }
  .component-title {
    padding: 1rem 1rem 0;
    font-weight: 500;
    font-size: 1.25rem;
  }
  .component-content {
    padding: 1rem;
    display: block !important;
  }
  .accordion-toggle-btn {
    display: none;
  }
}

/* 移动端样式 */
@media (max-width: 991.98px) {
  #responsiveContainer {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
  }
  .component-item {
    border: 1px solid var(--bs-accordion-border-color);
    border-radius: var(--bs-accordion-border-radius, .375rem);
  }
  .component-item:not(:first-of-type) {
    border-top: 0;
  }
  .accordion-toggle-btn {
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    text-align: left;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .accordion-toggle-btn::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
  }
  .accordion-toggle-btn:not(.collapsed)::after {
    transform: rotate(-180deg);
  }
  .component-content {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    border-top: 1px solid var(--bs-accordion-border-color);
  }
  .component-content.collapse {
    display: none;
  }
  .component-content.collapse.show {
    display: block;
  }
}

3. 交互JS逻辑

const mq = window.matchMedia('(min-width: 992px)')
const container = document.getElementById('responsiveContainer')
const itemList = container.querySelectorAll('.component-item')

// 初始化折叠交互属性
itemList.forEach((item, idx) => {
  const titleEl = item.querySelector('.component-title')
  const contentEl = item.querySelector('.component-content')
  const contentId = `responsive_content_${idx}`
  // 插入折叠按钮
  titleEl.innerHTML = `<button class="accordion-toggle-btn ${idx === 0 ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#${contentId}" aria-expanded="${idx === 0}" aria-controls="${contentId}">${titleEl.textContent}</button>`
  // 配置内容区属性
  contentEl.id = contentId
  contentEl.setAttribute('data-bs-parent', '#responsiveContainer')
  if(idx === 0) contentEl.classList.add('show')
  else contentEl.classList.add('collapse')
})

// 断点切换处理
const handleBreakpointChange = (e) => {
  const contentList = container.querySelectorAll('.component-content')
  if(e.matches) {
    // 桌面端：销毁折叠实例，全部展开
    contentList.forEach(el => {
      const ins = bootstrap.Collapse.getOrCreateInstance(el, {toggle: false})
      ins.show()
      ins.dispose()
    })
  } else {
    // 移动端：初始化折叠实例，默认仅展开第一个
    contentList.forEach((el, idx) => {
      bootstrap.Collapse.getOrCreateInstance(el, {toggle: idx === 0})
    })
  }
}

mq.addEventListener('change', handleBreakpointChange)
handleBreakpointChange(mq)

方案2：两套DOM+Bootstrap响应式显示类（零额外JS，适合固定内容） #

如果内容更新频率低，可以直接编写两套组件结构，通过Bootstrap自带的响应式显示类控制不同尺寸下的展示，不需要写额外JS逻辑：

<!-- 桌面端Card组，仅lg及以上尺寸显示 -->
<div class="d-lg-flex d-none gap-3">
  <div class="card flex-1">
    <div class="card-body">
      <h5 class="card-title">卡片标题1</h5>
      <p class="card-text">卡片长文本内容1</p>
    </div>
  </div>
  <div class="card flex-1">
    <div class="card-body">
      <h5 class="card-title">卡片标题2</h5>
      <p class="card-text">卡片长文本内容2</p>
    </div>
  </div>
</div>

<!-- 移动端Accordion，仅lg以下尺寸显示 -->
<div class="accordion d-lg-none d-block" id="mobileAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading1">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
        卡片标题1
      </button>
    </h2>
    <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#mobileAccordion">
      <div class="accordion-body">
        卡片长文本内容1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
        卡片标题2
      </button>
    </h2>
    <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#mobileAccordion">
      <div class="accordion-body">
        卡片长文本内容2
      </div>
    </div>
  </div>
</div>

该方案缺点是两套结构内容重复，后续修改需要同步更新两处。

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