Twitter bootstrap 3 Boostrap 3：多列列表

伙计们，我正在开发一个web应用程序，我正在使用Bootstrap 3。
我有一个项目清单：a，B，C，D，E，F，G，H，I，L，M

我谨代表名单如下：

对于大型设备：
A C E G I M
B D F H L

对于中型或大型设备：
A E I
B F L
CGM
D H

对于小型设备：
A G
B H
C I
DL
em
F

对于超小型设备： A
B
C
D
E
F
G
H
我
L
你应该继续读下去

用于中等屏幕

---

对于额外的小屏幕

如果您可以使用比要求的断点更少的断点（3对4），您可以执行以下操作：

<div class="container">
  <div class="col-sm-6">
    <div class="col-md-6">
      <div class="col-xs-12">A</div>
      <div class="col-xs-12">B</div>
      <div class="col-xs-12">C</div>
    </div>
    <div class="col-md-6">
      <div class="col-xs-12">D</div>
      <div class="col-xs-12">E</div>
      <div class="col-xs-12">F</div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="col-md-6">
      <div class="col-xs-12">G</div>
      <div class="col-xs-12">H</div>
      <div class="col-xs-12">I</div>
    </div>
    <div class="col-md-6">
      <div class="col-xs-12">J</div>
      <div class="col-xs-12">K</div>
      <div class="col-xs-12">L</div>
    </div>
  </div>

A.
B
C
D
E
F
G
H
我
J
K
L

我建议使用3对4断点的原因是，否则在一个列中没有最低的公共元素数（3，在本例中为-3/6/12），您需要找到一种方法使异常值从一个列移动到另一个列（即3/4/6/12在3和4相交的地方变得混乱）。通过将divs设置为

hidden-*

+

clearfix

的方法可以克服这个问题，但这非常复杂，可能不值得

注意：通常情况下，您希望在嵌套列之间放置

.row

s，但在这种情况下，这也会使事情变得复杂，因此您可能需要一些自定义CSS来抵消嵌套创建的复合填充，但您也可以使用它

---

PS-bootply现在是脆弱的，所以不能保存我的演示，但它工作，真的

一个糟糕的解决方案是将列表渲染4次（拆分列表并每次使用多个ul元素），然后使用BS3帮助器类根据断点显示所需的列表。您好，感谢您的回复。我已经看过文档了。列表必须垂直阅读，而不是水平阅读（仔细看我的问题）。毛罗没有误解你的问题，你误解了他的建议。如果你使用得当的话，他的建议将垂直呈现列表，并添加一些助手类。谢谢！它可以工作（代码中缺少close div标记）。不幸的是，它是不可能使用UL元素，它不是灵活的，因为我需要。最好的方法可能是使用nwq CSS3多列布局，但IE8和IE9不支持它（可在布局中找到）