使用引導程序根據屏幕大小顯示修復數量的行項目

我有一個顯示許多項目的網頁。假設有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

使用引導程序根據屏幕大小顯示修復數量的行項目

回答

相關問題