Question

我必须向用户展示真正庞大的链接云 - 大概有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 ？

执行此操作

Answer 1

Bootstrap是一个12列的网格系统，你不能将12除以5，所以你的巨大屏幕可以有4或6列。
如果您想要使用col-md-3替换col-md-2的6列无论如何，你肯定想阅读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>

Answer 2

如果＆＃34;列的垂直排序＆＃34>并不重要，那么你可以简单地使用固定宽度的浮动块。它应该是响应：

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

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

具有可变列号的响应表

2 个答案: