根据屏幕尺寸交换引导元素

Question

我想知道是否有一种本机bootstrap方法可以根据屏幕大小动态更改元素类。

我正在开发一个网页，其中包含包含可滚动文本的多个卡元素。当在台式机上查看时，卡片是水平排列的。当在手机上查看时，将垂直排列卡，这意味着要移动屏幕并从一张卡转换到另一张卡，我必须滚动一张卡的所有文本，然后再访问下一张卡。

在Bootstrap上，我看到了手风琴类型元素可以为我做，这样一个用户将积极决定切换手风琴以读取内容，然后再次将其切换为“关闭”并滚动屏幕，

我只是想知道是否这样。切换可以直接通过引导程序进行，也可以通过JavaScript完成，最重要的是，

Actialion

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        TITLE HERE
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        TEXT HERE
      </div>
    </div>
  </div>
</div>

card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">TITLE HERE</h5>
    <p class="card-text">
     TEXT HERE
    </p>
  </div>
</div>

感谢所有会回答我的

人a href =“ https://i.sstatic.net/4anoh.jpg” rel =“ nofollow noreferrer”>

Answer 1

Bootstrap可以根据屏幕大小隐藏元素：

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

https：//getbootstrap.com/ DOCS/5.0/UTILITION/DISPLAIT/＃HIDING-ELEMENTS

<div class="d-lg-none">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">TITLE HERE</h5>
      <p class="card-text">
        TEXT HERE
      </p>
    </div>
  </div>
</div>

<div class="d-none d-lg-block">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      TITLE HERE
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        TEXT HERE
      </div>
    </div>
  </div>
</div>