如何使用此代码创建列表网格视图

Question

我试着尽可能多地编辑css，除了在Js中我做了一个小函数，但它对我来说不起作用

<div class="row featured portfolio-items">
<div class="item col-lg-5 col-md-12 col-xs-12 landscapes sale pr-0 pb-0">

Answer 1

我假设您希望使用JavaScript/jQuery以编程方式创建网格布局。

这里有一个你可以尝试的例子：

<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>