Question

我有动态生成的列，根据用户屏幕大小具有可变宽度：

如何在行中拆分这些div？

Answer 1

您无需将它们拆分为行。许多响应式布局要求列单位连续超过12 。这在Bootstrap中称为列包装。

如果列的内容高度不同，则需要使用响应式重置来防止高度问题。这将根据层级强制“包装”每X列数。

Clearfix Demo (responsive tiers)

还有CSS-only variation'clearfix'。

Answer 2

Bootstrap行的长度为12，这意味着超过12的所有行都将放在行下。不幸的是，这看起来并不好看。我不知道你是怎么做那些div的。假设您将数组传递给前端，您可以根据div的数量使用javascript。

有可能是更好的方法。我是编程新手，但会想到这样的事情：

请注意，您需要将yourArray更改为数组的变量名称。

<div id="allRows">
<script>
    var mqxs = window.matchMedia( "(max-width: 767px)" );
    var mqsm = window.matchMedia( "(min-width: 768px)" );
    var mqmd = window.matchMedia( "(min-width: 992px)" );
    var mqlg = window.matchMedia( "(min-width: 1200px)" );
    var html = '<div class="row">';
    if (mqxs.matches){
        var max = 2;
        var count = 1;
        for(var i=0; i < yourArray.length; i++){
             if (var > max){
                 html += "</div>";
                 html+= "<div class='row'>";
                 count = 1;
             }
             html+= "<div class= 'col-xs-6>yourArray[i]'</div>";
             count += 1;
        }
    }else if (mqsm.matches){
        var max = 3;
        var count = 1;
        for(var i=0; i < yourArray.length; i++){
             if (var > max){
                 html += "</div>";
                 html+= "<div class='row'>";
                 count = 1;
             }
             html+= "<div class= 'col-sm-4'>yourArray[i]'</div>";
             count += 1;
        }
    }}else if (mqmd.matches){
        var max = 4;
        var count = 1;
        for(var i=0; i < yourArray.length; i++){
             if (var > max){
                 html += "</div>";
                 html+= "<div class='row'>";
                 count = 1;
             }
             html+= "<div class='col-md-3'>yourArray[i]'</div>";
             count += 1;
        }
    }else (mqlg.matches){
        var max = 6;
        var count = 1;
        for(var i=0; i < yourArray.length; i++){
             if (var > max){
                 html += "</div>";
                 html+= "<div class='row'>";
                 count = 1;
             }
             html+= "<div class= 'col-lg-2>yourArray[i]'</div>";
             count += 1;
        }
    }

    html += </div>
    document.getElementById("allRows").innerHTML = html;
</script>
</div>

如何使用未知列数在bootstrap上创建行？

2 个答案: