Jquery 引导转盘-项目子项管理

在引导转盘中，我在项目中有3个项目，如下所示：

<div class='item'>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
</div>
<div class='item'>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
</div

分项
分项
分项
分项
分项
分项
仅使用CSS是不可能的。我能想象的唯一一件事就是使用JavaScript“hack”检查视口宽度，并相应地删除或添加子项。但我也认为这不是解决你问题的好办法

然而，使用引导（v3）可以做的事情是有三个预定义的宽度，
col-sm-x
、
col-md-x
和
col-lg-x
。如果将所有这些类放在一个元素上，它在不同的屏幕大小（也称为视口）上的行为会有所不同


分项
分项
分项

在上面的示例中，您将看到在小视口中，子项比在大视口中宽

作为对我答案的补充，我还想向您展示，其中一个选项是旋转木马必须显示的项目数量。
您可以使用两种不同的旋转木马，一种隐藏在小屏幕上，但显示在大屏幕上，另一种显示在小屏幕上，隐藏在大屏幕上。这样，您还可以更自由地为不同的屏幕大小设计和定制旋转木马（这基本上就是Bootstrap和RWD的用途，首先是lol）

只需为两个转盘提供不同的ID和适当的媒体查询类，如下所示：

…
此选项将起作用，但不是最佳选项。例如，如果您需要更改某个项目中的某些内容，您现在需要在xs滑块中更改它，然后再在lg滑块中更改它。
这是一个有趣的问题。我现在还不知道答案。我能想到一个可能有用的黑客。为每个屏幕大小创建一个旋转木马。用隐藏的xs、隐藏的sm、隐藏的md等标记每个实例的父级。这似乎是一个非常糟糕的解决方案，但它可能会起作用。此外，请检查以下内容：您需要什么样的答案？仅css？css+js？纯js？jQuery？@Urahara，任何。但是又短又漂亮这不是一个好方法，你会在整个旋转木马上加载两次图像。最好的方法是指定“col-xs-x”、“col-sm-x”、“col-md-x”等来更改每个屏幕大小显示的幻灯片数量，“visible xs”等仅显示该范围内的内容。对于其他样式，请在CSS中使用@media查询。我看不出有任何理由改变引导和CSS功能之外的结构，如果你坚持这样做，你应该使用PHP或C#（取决于你的开发环境）
<div class='item'>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
</div>
<div class='item'>
    <div class='col-md-6 col-md-4 sub-item'>Sub Item</div>
</div>

<div class="item">
    <div class="col-sm-4 col-md-3 col-lg-2 sub-item">Sub item</div>
    <div class="col-sm-4 col-md-3 col-lg-2 sub-item">Sub item</div>
    <div class="col-sm-4 col-md-3 col-lg-2 sub-item">Sub item</div>
</div>