使用bootstrap 3增加较低分辨率的嵌套列数

Question

我正在使用Bootstrap v3.3.1构建网站

我对其中一个部分有以下设计（请查看图像）。我将对两列使用 .col-lg-4 和 .col-lg-8 。当视口足够小以使列跨越全宽时，我希望左列内容（带有彩色图标的那8个'行'）显示在3列中，然后在2列中显示一列中的低分辨率。

然而，现在我想不出一个简单的解决方案，如何在较小的分辨率下增加列数。首先，我试图将列内容留在嵌套行中，这没有任何意义，因为我无法在一行中显示它们。

我阅读了bootstrap官方文档，并尝试在线搜索，但我无法找到我想要的内容。我相信这对于bootstrap来说是一项非常简单的任务，它应该以自然，无痛的方式实现。也许这个技术有一些特殊的词或术语，我不知道，这就是我无法找到解决方案的原因。

我只需要一个想法来解决这个问题。感谢

更新：

我只是对图片进行了快速编辑，以便更清楚地了解此部分在较小分辨率上的外观：

Answer 1

因此，如果我正确理解了问题，您希望根据屏幕分辨率动态更改左列内容的列数，如下所示：

大：左边的col-lg-4（仅占视图的33％）

medium：左侧3列内容（跨越整个视图）

small：左侧的2列内容（跨越整个视图）

非常小：左侧的1列内容（跨越整个视图）

如果以上是正确的，我相信你应该使用下面显示的bootstrap的嵌套功能：

<div class="row">
    <div class="col-lg-4">
        <div class="row">
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
            <div class="left col-lg-12 col-md-4 col-sm-6 col-xs-12">LEFT SIDE CONTENT</div> 
        </div>
    </div>
    <div class="col-lg-8">
        RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT RIGHT SIDE CONTENT 
    </div>
</div>

并继承小提琴演示：http://jsfiddle.net/swm53ran/4/要查看列的动态更改，请拖动结果列以更改其宽度以模拟分辨率更改。希望这可以帮助！

Answer 2

要在各种屏幕尺寸下获得不同的列分组，您可以为列应用多个类。

请参阅Bootstrap mobile and desktop示例。

<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6"></div>

使用上述css类，DIV会将其自身调整为12,10,8或6列，具体取决于视口大小。

Answer 3

您可以按大小顺序堆叠类：

例如

<div class ="col-lg-4 col-md-3 col-sm-2">LEFT</div>
<div class ="col-lg-8 col-md-9 col-sm-10">RIGHT</div>

我可能会跳过大而且使用：

<div class ="col-md-4 col-sm-3 col-xs-2">LEFT</div>
<div class ="col-md-8 col-sm-9 col-xs-10">RIGHT</div>