如何创建“响应式”列表：创建多个列以适应可用宽度？答案

【问题标题】：How to create 'responsive' lists: creating multiple columns to fit available width?如何创建“响应式”列表：创建多个列以适应可用宽度？
【发布时间】：2014-06-04 06:04:45
【问题描述】：

在我以前的固定宽度世界中，我可以取一个变量 X # 个元素，除以三，然后相当有效地将数据分布在三列中：

在这个新奇的响应式世界中，我提出的最佳解决方案（到目前为止）是将数据拆分为固定大小的存储桶（例如 5 个），然后让分块列表向左浮动：

当您有一个很长的列表时，这很有效，但是当您有一个小列表时 - 有很多水平像素会被浪费。如果其中一个元素最终变得超长/超宽，它也能很好地工作，并且它可以有效地将下一组列表向下推。

我目前正在使用 Bootstrap3，但对此开放纯 CSS 解决方案。

有没有很好的方法来做响应式多列列表（针对设备上的可用宽度进行优化）

【问题讨论】：

等等……这不是 bootstrap gird 的作用吗？也许我在这里遗漏了一些东西......
解决方案类似，但微妙的不同足以令人痛苦。 Bootstrap（通常）使您能够将其拆分为 3rds，（例如我的固定宽度示例），但它不允许您说我有 X 元素，现在将它们分成（无论需要什么）Y 组，这将自动适应可用的可用宽度。这可能是一个白日梦。

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

如果您只在一行中创建 3 个响应式列会怎样：

编辑：添加媒体查询以使 3 列成为 1 列

jsFiddle

<div class="outer">
    <div class="inner1">Hello</div>
    <div class="inner2">World</div>
    <div class="inner3">!</div>
</div>

.outer {
    width: 100%;
}
.inner1 {
    clear: both;
    float: left;
    display:inline-block;
    width: 32%;
}
.inner2 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;

}
.inner3 {
    display:inline-block;
    width: 32%;
    margin-left: 2%;
}

@media only screen and (max-width: 420px) {   /* small mobile sizes */

.inner1, .inner2, .inner3 {
    display:block;
    width:100%;
    }
}

This Fiddle 使用媒体查询进行更新，使屏幕宽度上的 3 列变为 1 列

【讨论】：

将宽度设置为内部 div 的主要问题是“浪费”，如果你有一列，谁的列表值很短。实际上，我不喜欢预先指定要将数据拆分成的列数，而只是让项目根据可用宽度创建自己的列。我最初的固定宽度解决方案远非完美，当我转向响应式设计时，我希望最终能用一个好的设计模式来解决这个问题。
这些不是固定宽度。 width: 300px 已修复。这些是响应宽度。如果您所说的“可用宽度”是指当有人说时您希望这三列变成一列，那么在移动设备上，您需要在媒体查询中执行此操作。这很简单。也许我不明白你的问题。
抱歉不清楚，我知道能够固定一定比例的不动产（如（33% 以上））来模拟固定宽度设计。我认为我的设计本身就有缺陷。如果有办法让我有 5 列，如果所有数据都适合 20% 的增量，或者如果我只能有 2 列/etc/etc，我很想知道是否有办法让列以匹配适合设备 + 内容长度的任何内容。
如果你的意思是因为 bootstrap 是一个 12 列的网格，所以只允许 1,2,3,4,6,12 列，你需要做的就是跳出 bootstrap 类并创建你的拥有 5 列 20% 的自定义类（实际上它们需要每列低于 20%）
另外，这并不“模拟固定宽度的设计”。这是一种 Fliud 或 Responsive 宽度设计。列随窗口调整大小。您可以通过媒体查询更改布局。 Bootstrap 只是一个利用预先编写的类和媒体查询的框架。你仍然可以像我上面那样写你自己的。您不仅限于 bootstrap 为您提供的类和媒体查询。