使用引导程序根据屏幕大小显示修复数量的行项目

我有一个显示许多项目的网页。假设有14个项目要显示。使用引导程序根据屏幕大小显示修复数量的行项目

每个项目都有一个引导列配置，具体取决于设备屏幕大小的类型。通过添加以下类别col-lg-2,col-md-3,col-sm4和col-xs-6，引导程序很容易，使得每行分别有6,4,3和2个项目。

我正在使用引导程序data-toggle,data-target和collapse类，以便有2个完整行项目，其余隐藏。

例如，lg设备屏幕上，代码：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item1</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item2</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item3</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item4</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item5</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item6</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item7</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item8</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item9</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item10</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item11</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item12</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item13</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item14</div> 
    </div> 
    <div class="row"> 
     <button class="btn btn-link collapsed" data-toggle="collapse" data-target=".hide-this">Toggle</button> 
    </div> 
</div>

在这种情况下有12个可见的项目并且只有2项是隐藏的。

对于md设备有8个可见的项目和6个隐藏物品：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item1</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item2</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item3</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item4</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item5</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item6</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item7</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item8</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item9</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item10</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item11</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item12</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item13</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 hide-this collapse">item14</div> 
    </div> 
    <div class="row"> 
     <button class="btn btn-link collapsed" data-toggle="collapse" data-target=".hide-this">Toggle</button> 
    </div> 
</div>

对于sm装置中，有6个可见的项目和8隐藏，并且在最后，对于xs设备有2可见物品和12隐藏。

虽然这些代码片段分别在每个设备屏幕上正常工作，但我不知道如何将它们组合在一起。

我的目标是只有2行可见项目，其余隐藏任何数量的项目或屏幕配置。因此，我正在寻找一种方法，根据屏幕配置将hide-this collapse类动态添加到许多项目中。

任何想法都非常欢迎！

备注：

假设总有至少12个项目，以便有充分的行以显示所有的屏幕配置
我使用引导3显示（但引导4将是一个选项如果更容易）

来源

2017-10-20 oliv

要检测屏幕尺寸，请使用Modernizr。 mq()函数允许查询媒体属性（例如屏幕大小）。注意映射到最小尺寸的sm,md,lg的像素尺寸768,992,1200。

使用nth-child CSS属性为n+x参数（x = 3,7,9,13）以跳过第一个元素。

在documment.ready() javascript函数，更新div元素添加引导类collapse和hide-this得到切换按钮的行为。

<head> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<html> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item1</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item2</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item3</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item4</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item5</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item6</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item7</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item8</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item9</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item10</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item11</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item12</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item13</div> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">item14</div> 
    </div> 
    <div class="row"> 
     <button class="btn btn-link collapsed" data-toggle="collapse" data-target=".hide-this">Toggle</button> 
    </div> 
</div> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/modernizr-custom.js"></script> 
<script> 
$(document).ready(function() { 
    if (Modernizr.mq('(max-width:767px)')){ 
      $('.row div:nth-child(n+3)').addClass("collapse hide-this"); 
    } 
    if (Modernizr.mq('(min-width:768px) and (max-width:991px)')){ 
      $('.row div:nth-child(n+7)').addClass("collapse hide-this"); 
    } 
    if (Modernizr.mq('(min-width:992px) and (max-width:1199px)')){ 
      $('.row div:nth-child(n+9)').addClass("collapse hide-this"); 
    } 
    if (Modernizr.mq('(min-width:1200px)')){ 
      $('.row div:nth-child(n+13)').addClass("collapse hide-this"); 
    } 
}); 
</script> 
</html>

来源

2017-10-23 13:13:03 oliv

您可以通过使用媒体查询来实现此目的。您可以通过媒体查询为您的项目提供受当前屏幕宽度影响的类。

实施例：

@media (max-width: 1200px) { 
    .md-hide { 
     display: none; 
    } 
}

这会给CSS-属性display: none;与md-hide类的所有项，只要宽度小于或等于1200像素（这是MD之间的”自举的断裂点“和”lg“）。

UPDATE：

，如果你希望能够使用按钮来切换可见性，你可以使用JavaScript来更改切换按钮的data-target像这样：

window.onresize = function() { 
    var target = '.lg-hide'; 
    if (window.innerWidth <= 1200) { 
     target = target + ', .md-hide'; 
    } 
    if (window.innerWidth <= 992) { 
     target = target + ', .sm-hide'; 
    } 
    // you would need to give a specific ID to the toggle button 
    document.getElementById('#togglebtn').setAttribute('data-target', target); 
}

我会很高兴听到它是否有效，纯Javascript不是我最大的特长：D

来源

2017-10-20 09:58:50 Keshpeth

感谢这一点，但如何将这可以链接到切换按钮？ – oliv

您是否希望切换按钮切换“hide-this”类的项目可见性？ – Keshpeth

好的，我现在看到了，我要更新我的答案。 – Keshpeth

使用引导程序根据屏幕大小显示修复数量的行项目

回答

相关问题