Bootstrap网格动态定位/转换元素

Question

是否有可能当您到达所选width: 100%的{​​{1}}时，不是将所有元素转换为min-width，而是可以将最后一个元素移动到新行并更新原始行中元素的宽度？

如果这样做更容易，我也会使用sass。

这是否可以使用bootstrap CSS而无需编写任何javascript代码？

发件人：

要

不行：

现在，当我在此内容的左侧和右侧有项目时，我遇到了问题。宽度应该是静态的，现在改变窗口的大小会使内容变得混乱。当尺寸名称是水平的时，添加操作应该在新行中。

加： 尺寸名称col-lg-2 min宽度不够大。

示例：http://jsfiddle.net/mato75/s8tmqvoo/2/

Answer 1

...是

<div class="row">
    <div class="col-lg-2 col-md-3 col-sm-4">Data 1</div>
    <div class="col-lg-2 col-md-3 col-sm-4">Data 2</div>
    <div class="col-lg-2 col-md-3 col-sm-4">Data 3</div>
    <div class="col-lg-2 col-md-3 col-sm-4">Data 4</div>
    <div class="col-lg-2 col-md-3 col-sm-4">Data 5</div>
    <div class="col-lg-2 col-md-3 col-sm-4">Data 6</div>
</div>

在中等屏幕上，这将有四个。在小屏幕上，这将有三个横跨，第四个元素（在此示例中为Data 4）将显示在第二行。

您最终使用的内容取决于您希望内容在不同屏幕分辨率下的显示方式。如果您希望按照自己的描述在移动设备上显示此内容，请将col-sm-4更改为col-xs-4。

Bootply Demo