我有一个动态网站,想要使用Bootstrap Carousel。由于项目大小可以更改,我需要关闭项目标记到窗口大小并打开一个新的符合响应度。
要捕获窗口大小我正在使用下面的Javascript
$(window).ready(function() {
var wi = $(window).width();
if (wi <= 480){
$("div.item-width").text('Screen width is greater than 480px. Width is currently: ' + wi + 'px.');
$("div.item-width").addClass('col-xs-2');
}
else if (wi <= 767){
$("div.item-width").text('Screen width is greater than 768px. Width is currently: ' + wi + 'px.');
$("div.item-width").addClass('col-sm-3');
}
else {
$("div.item-width").text('Screen width is greater than all. Width is currently: ' + wi + 'px.');
}
$(window).resize(function() {
var wi = $(window).width();
if (wi <= 480){
$("div.item-width").text('Screen width is greater than 480px. Width is currently: ' + wi + 'px.');
$("div.item-width").addClass('col-xs-2');
}
else if (wi <= 767){
$("div.item-width").text('Screen width is greater than 768px. Width is currently: ' + wi + 'px.');
$("div.item-width").addClass('col-sm-3');
}
else {
$("div.item-width").text('Screen width is greater than all. Width is currently: ' + wi + 'px.');
}
});
});
我的HTML就像这里
<div class="item">
{foreach name=boxartikel from=$Box->Artikel->elemente item=Artikel}
<div class="item-width">
<img src="" />
</div>
{/foreach}
</div>
我想,例如,如果我们在item-width
内有6个图像,并且窗口大小是750px而不是将col-sm-3
添加到item-width
,请关闭item
类之后的标记4张图片并打开一个带item
类的新DIV标签。由于我不是编码器,我试图以某种方式对其进行排序。