响应网格与行详细信息

Question

我正在寻找响应式网格系统。线索是，对于单击/选中的单元格，我还需要Row Details之类的内容（单元格详细信息？可扩展？）。

例如：pr0gramm.com它非常接近我的功能。

列：

• Dekstop：4
• 平板电脑：3
• 电话：2

对于一行中的所有4列，我可以在所选单元格的行之后添加一个新div。看到： http://i.stack.imgur.com/FcbfO.png

连续4列中的3列（仍然是div中的4列）我得到了这个结果： http://i.stack.imgur.com/5raJE.png

是否有类似的框架或类似内容？或者我必须自己用js实现这个？

Answer 1

你可以用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;
  }

}