Question

我有一个网页，其中显示了许多项目。假设有14个项目要显示。

每个项目都有一个引导列配置，具体取决于设备屏幕大小的类型。只需添加以下类col-lg-2，col-md-3，col-sm4和col-xs-6即可轻松实现引导程序，以便分别有6,4,3和每行2件。

我使用bootstrap 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个项目
我使用bootstrap 3（但如果更容易，则可以选择bootstrap 4）

Answer 1

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

示例：

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

只要宽度小于或等于1200px（这是bootstrap在“md”和“md”之间的断点），这将为所有具有display: none;类的项提供CSS属性md-hide。 “LG”）。

更新：

如果您希望能够使用按钮切换可见性，则可以使用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

Answer 2

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

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

使用bootstrap

2 个答案: