Question

我认为展示我的模型和快速演示将向您展示我的意思。

我在工作人员页面上使用此代码段http://bootsnipp.com/user/snippets/6nOnr，我已根据此模型http://i.imgur.com/vjt6XS4.png进行操作，并希望这些元素更改为此格式{{ 3}}

因此，希望将col-md-3行的数组在col-sm和较小的尺寸上更改为单个手风琴，其中卡片的内容重新格式化为手风琴项目，每个都将h1元素移动到手风琴名称中。

我的理由是，我认为卡片风格是一种相当直观的设计方式，因为它有点让人联想到名片。但是在小屏幕尺寸下，屏幕占用空间太多，用缩略图和细节更好。

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

Answer 1

您可以使用bootstrap的utility classes来显示和隐藏小尺寸的手风琴。所以你可以这样做：

<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>

在Bootstrap中是否可以隐藏元素并用手风琴替换它们？

1 个答案: