带有溢出行的Bootstrap布局

Question

我尝试在Google上查找，但无法找到任何正确的内容，因为stackoverflow是世界上最有用的社区，我想我会在这里尝试。

我正在研究一个非常具体的商店布局，我一度陷入困境。

这是主要的模型：http://ccommerce.c-call.eu/

以下是有人选择类别时应该发生的事情：http://ccommerce.c-call.eu/product-tab

问题在于第二个的响应性。类别表示行是：

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="col-md-4 col-sm-4 col-xs-4">
       [CATEGORY]
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
       [CATEGORY]
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
       [CATEGORY]
    </div>
</div>

当你启用类别标签时，它就像：

<div class="col-md-7 col-sm-12 col-xs-12">
    [CATEGORIES col-xx-4]
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
   [CATEGORY TAB]
</div>

我想要的是，在XS视图中，类别表示应该是一行溢出，就像表响应引导类一样，基本上，大视图应该是这样的：

和小视图（xs，低于768px）应该是这样的：

现在小视图是：

可以这样做吗？我不是真正的javascript，可能一些有很多类交换的js会有所帮助，但也许有更简单的方法？

Answer 1

通过类别容器上的媒体查询更改css属性 - 添加overflow-x：auto;白色空间：nowrap;并在类别项目上将显示更改为内联块。