引导网格动态定位/转换元素

Question

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

我用的也是sass，如果那样更容易的话。

在不编写任何javascript代码的情况下，引导CSS可以做到这一点吗？

出发地：

​

To:

​

​

不好：

​

​

现在，当我在这个内容的左边和右边有项目时，我遇到了问题。宽度应该是静态的，现在更改窗口的大小会扰乱内容。当维度名称是水平的时，添加操作应该在新行中。

加:尺寸名称-lg-2分钟宽度不够大.

示例：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演示