具有可变列号的响应表答案

【问题标题】：responsive table with variable column number具有可变列号的响应表
【发布时间】：2015-07-03 23:01:14
【问题描述】：

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

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

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

在大屏幕上或：

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

在移动设备上。如何使用 Bootstrap 做到这一点？

【问题讨论】：

标签： html css twitter-bootstrap tablelayout

【解决方案1】：

Bootstrap 是一个 12 列的网格系统，您不能将 12 除以 5，因此您的大屏幕中可以有 4 或 6 列。
如果您想要 6 列，请将 col-md-3 替换为 col-md-2
无论如何，您肯定想阅读引导文档：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>

【讨论】：

【解决方案2】：

如果“列”的垂直顺序不重要，那么您可以简单地使用固定宽度的浮动块。它应该是响应式的：

<div class="container">
    <div class="block">Link #1</div>
    <div class="block">Link #2</div>
    ...
</div>

演示：http://plnkr.co/edit/uv4lFbu8gQXG2otO4wlN?p=preview

【讨论】：

如果你为链接容器设置了一些固定的宽度——它可能会起作用。但是垂直对齐会很好。
CSS 列也可以垂直对齐。