ブートストラップを使用して画面サイズに応じた行項目の修正番号を表示

いくつかの項目が表示されているWebページがあります。表示する項目が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つの隠された項目がある：smデバイスについて

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

は、xs装置6つの可視アイテムと8隠され、そして最後には、存在する目に見える2がありますアイテムと12隠されています。

これらのコードスニペットは各デバイス画面で別々に正常に動作しますが、どのようにそれらをまとめて組み合わせることはできません。

私の目標は、目に見えるアイテムを2行しか持たず、残りのアイテムやスクリーンの設定を隠しておくことです。だから私は動的に画面構成に基づいて多くの項目にhide-this collapseクラスを追加する方法を探しています。

どのようなアイデアも大歓迎です！

備考：

は、すべての画面設定
をで表示するための完全な行を持つために、私は、ブートストラップ3を使用しています（ただし、ブートストラップ4のようになります表示する少なくとも12個の項目が常に存在していると仮定しますオプションの場合）

出典

2017-10-20 oliv

Modernizrを使用してください。 mq()機能は、メディアプロパティ（例えば、画面サイズ）を問い合わせることを可能にする。 sm、md、lg分のサイズにマップされているピクセルサイズ768,992,1212に注目してください。

nth-childn+xパラメータのCSSプロパティ（x = 3,7,9,13）を使用して、最初の要素をスキップします。 documment.ready() javascript関数で

、トグルボタンの動作を取得するには、ブートストラップクラスcollapseとhide-thisを追加するdiv要素を更新。

<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

これはメディアクエリを使用して実現できます。メディアクエリで現在の画面幅の影響を受けるアイテムクラスを与えることができます。

例：これは限り幅（1200px以下であるようにMD」の間にブートストラップの破断点がある、md-hideクラスを持つすべての項目にCSS-性display: none;を与える

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

"と" lg "）。

UPDATE：私はなるだろう

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); 
}

：あなたのボタンを使って表示を切り替えることができるようにしたい場合は

、あなたはそうのようなトグルボタンのdata-targetを変更するにはJavascriptを使用することができますそれがうまくいくかどうか聞いて嬉しいです。Javascriptは私にとって最大のものではありません。D

出典

2017-10-20 09:58:50 Keshpeth

これはありがたいですが、これをトグルボタンにリンクする方法はありますか？ – oliv

トグルボタンでアイテムの表示を「非表示」クラスで切り替えるにはどうしますか？ – Keshpeth

ああ、私は今それを見る、私は私の答えを更新するつもりです。 – Keshpeth

ブートストラップを使用して画面サイズに応じた行項目の修正番号を表示

答えて

関連する問題