在 bootstrap3 carousel 的移动视图中显示一列

【问题标题】：Display one column in mobile view in bootstrap3 carousel在 bootstrap3 carousel 的移动视图中显示一列
【发布时间】：2023-03-29 00:47:01
【问题描述】：

我使用 bootstrap3 carousel 创建了一个用于产品展示的轮播。我在一个项目中有 4 列。我在移动视图中显示这些项目时遇到问题。因为我在轮播项目引导程序中使用了列，所以在移动视图中垂直对齐列，但我需要在移动视图中一次只显示一个产品。这是相同的代码。

【问题讨论】：

用 4 列发布您的轮播代码。

标签： jquery html css twitter-bootstrap

【解决方案1】：

您可以显式隐藏或显示不同宽度的元素 (http://getbootstrap.com/css/#responsive-utilities-classes)。例如。将class="hidden-xs" 添加到最后三个元素，因此只有第一个元素在超小型（

编辑：

哦，我没注意到。因此，也许您可以在 html 中使用多个视图并只显示所需的一个。

<div id="defaultview" class="hidden-xs">
    <!-- default carousel / more items per slide -->
</div>
<div id="smallview" class="visible-xs">
    <!-- carousel with one item per slide -->
</div>

【讨论】：

感谢您的回复。但它会完全隐藏在移动设备中，我希望它在移动设备中的每个视图只显示一列。