如何使用此代码制作列表网格视图？

Question

除了在Js中我做了一个小的功能外，我试图尽可能多地编辑css

import .*

Answer 1

我假设您想使用JavaScript / jQuery以编程方式创建Grid布局。

以下是您可以尝试的示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="mycontainer"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function () {
        var rowCount = 5;
        var colCount = 3;

        var container = $('#mycontainer');

        for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
            var row = $('<div>').addClass('row m-0').appendTo(container);
            for (var colIndex = 0; colIndex < colCount; colIndex++) {
                var col = $('<div>').addClass('col border border-success').text("Col " + colIndex+", Row "+ rowIndex).appendTo(row);
            }
        }
    })
</script>