0

応答性の高いグリッド システムを探しています。手がかりは、Row Detailsクリック/選択されたセル (Cell Details? Expandable?) のようなものも必要だということです。

例：pr0gramm.com私の機能にかなり近い。

列:

  • デスクトップ: 4
  • タブレット: 3
  • 電話: 2

行に 4 つの列がすべてあるので、選択したセルの行の後に新しい div を追加するだけです。参照: http://i.stack.imgur.com/FcbfO.png

行に 4 列のうち 3 つ (まだ div に 4 列) で、次の結果が得られます: http://i.stack.imgur.com/5raJE.png

フレームワークなどはありますか？または、これを自分で実装する必要がありjsますか?

4

1 に答える 1

0

CSSでそれを行うことができます。@media (max-width: 768px) のようなものを追加して画面サイズを検出し、異なる CSS を異なる画面サイズに提供します。

No More Tableが良い例です

HTML

<div class="columns">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

@media (max-width: 1024px){

  .columns:nth-child(3){
    display:none;
  }

}

@media (max-width: 768px){

  .columns:nth-child(3){
    display:none;
  }

  .columns:nth-child(4){
    display:none;
  }

}
于 2015-08-24T23:30:23.730 に答える