具有可变列号的响应表 [英] responsive table with variable column number

问题描述

我必须向用户展示真正巨大的链接云 - 大约1000条链接。很自然，我为此目的使用表格，但表格不响应 - 在移动设备上，我得到的链接非常小，在小型PR屏幕上，我得到一个滚动条。

我想要的是CSS框架来决定，可以向用户显示多少列，而链接大小仍然保持舒适。所以，它的：

$ pre $ code链接链接链接链接链接
链接链接链接链接链接链接
链接链接链接链接在大屏幕上链接

 链接链接
链接链接
链接链接
链接链接
链接链接
链接链接
链接链接
  

在手机上。如何使用 Bootstrap ？

解决方案

Bootstrap是一个12列的网格系统，不能将12乘以5，所以你可以在你的大屏幕上有4或6列。

如果你想要6列替换 col-md-3 with col-md-2

无论如何，您一定要阅读bootstrap文档： http://getbootstrap.com/css/#grid

 < div class =row> 
< div class =col-xs-6 col-sm-6 col-md-3> link< / div> 
< div class =col-xs-6 col-sm-6 col-md-3> link< / div> 
< div class =col-xs-6 col-sm-6 col-md-3> link< / div> 
< div class =col-xs-6 col-sm-6 col-md-3> link< / div> 
< div class =col-xs-6 col-sm-6 col-md-3> link< / div> 
 ... 
< / div> 
  

I have to show user really huge link cloud - something about 1000 links. It's natural I use tables for that purpose, but tables are not responsive -- on mobile devices I am getting extremely small links, which on small PR-screens I am getting a scrollbar.

What I want is CSS framework to decide, how many columns could be comfortable shown to user, while link size still stays comfortable. So, its:

link    link    link    link    link
link    link    link    link    link
link    link    link    link    link

on huge screen or:

link    link
link    link
link    link
link    link
link    link
link    link
link    link

On mobile. How do I do that using Bootstrap?

解决方案

Bootstrap is a 12 column grid system, and you can't divide 12 by 5, so you can have 4 or 6 columns in your huge screen.
If you want 6 columns replace col-md-3 with col-md-2
Anyway, you definitely want to read bootstrap docs:http://getbootstrap.com/css/#grid

<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3">link</div>
  <div class="col-xs-6 col-sm-6 col-md-3">link</div>
  <div class="col-xs-6 col-sm-6 col-md-3">link</div>
  <div class="col-xs-6 col-sm-6 col-md-3">link</div>
  <div class="col-xs-6 col-sm-6 col-md-3">link</div>
  ...
</div>

这篇关于具有可变列号的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！