html - 如何使用 Bootstrap 以响应方式显示所有名称

Question

我有一个包含 500 个名称的数组，如下所示:

var names= ['LongName 1234567890', 'LongName 1234567890', 'LongName 1234567890', 'LongName 1234567890', 'LongName 1234567890', 'LongName 1234567890',...... 'LongName 1234567890', ];

我有一个空白页面，上面设置了 Bootstrap 。我必须以响应式方式以水平和垂直方式(类似于表格)显示所有这些名称。

例如:如果是台式机，我必须以 7 行 14 列的形式显示所有这些内容，而平板电脑则以响应方式少一些。我是 Bootstrap 或前端开发的新手。我该如何实现？

我尝试在 div 中创建 span 标签。但我不确定以 Bootstrap 方式执行此操作是否正确。

Jsfiddle: http://jsfiddle.net/pj0cz3n5/

Answer 1

试试这个，它将每个跨度设置为宽度的 14%，从而减少您看到的空间。

http://jsfiddle.net/pj0cz3n5/4/

.row span{
    float:left;
    border: 1px solid black;
    width: 14%;
}

14% 只不过是 100% 除以 7 - 始终给出 7 列。您需要针对不同宽度的设备修改此设置。