javascript - 在 Bootstrap 中是否可以隐藏元素并用 Accordion 替换它们？

Question

我认为展示我的模型和快速演示会告诉您我的意思。

我正在使用这个片段 http://bootsnipp.com/user/snippets/6nOnr在我基于此模型的员工页面上 http://i.imgur.com/vjt6XS4.png并希望元素会更改为这种格式 http://i.imgur.com/v0sISnP.png

因此，希望将这个 col-md-3 行的数组更改为 col-sm 和更小的尺寸，将卡片的内容重新格式化为一个 Accordion 元素，每个 h1 元素都移到 Accordion 名称中。

我这样做的原因是我认为卡片样式是一种相当直观的设计方式，因为它有点让人联想到名片。但在小屏幕尺寸下，它会占用太多屏幕空间，最好用缩略图和详细信息代替。

抱歉，来晚了，我觉得这可能需要编辑才能更有意义。

Answer 1

您可以使用 Bootstrap 的 utility classes显示和隐藏小尺寸的 Accordion 。所以你可以这样做:

<div id="myAccordion" class="visible-xs-block visible-sm-block">
    <!-- this will be hidden for md and lg sizes -->
</div>
<div class="visible-md-block visible-lg-block">
    <!-- this will be hidden for sm and xs sizes -->
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>