如何在使用jQuery模板的同时创建响应式卡片列？

编程问答 2022-10-26

问题描述

我目前正在开发一个响应式的“智能家居”网络应用。

为使应用程序对更大的屏幕有更好的响应，我想将房间和光卡分成几列-平板电脑（lg）2列，台式机（xl）3列。

这是该应用在xs和s显示屏（移动设备）上的外观：

enter image description here

这就是我希望这些卡片在lg上的外观：

enter image description here

我正在从JSON文件加载所有数据，并为每个房间和灯光创建一个卡片，如下所示：

$.each(rooms_data,function (index,obj) {
template = 
    `
    <div class="card" style="background-color: #6e6e6e;">
        <div class="card-body" data-cardid="${obj.id}">
            ` + html_favourite_light + `
            <h6 class="card-title" style="color: #d1d1d1;">Room: ${obj.room}</h6>
            <h5 class="card-subtitle mb-2" style="color: #ffffff;">${obj.name}</h5>
            <p style="color: #ffffff;">rating:` + html_rating_light + `</p style="color: #ffffff;">
            <select class="custom-select mb-3" id="sel1" style="background-color: #696969; border: none; color: #ffffff;">
                <option>${obj.select_1}</option>
                <option>${obj.select_2}</option>
                <option>${obj.select_3}</option>
                <option>${obj.select_4}</option>
            </select>
            ` + html_switch_light + `
            <h5 class="card-text pt-2" style="color: white;">Main Switch</h5>
        </div>
    </div>
    `
})

我已经在卡片组和卡片组上进行过尝试，但是直到现在我都没有得到正确的结果。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljqueryjsontwitter-bootstrap