Javascript Bootstrap 3.0网格-如何在垂直方向上转换它们？

我正在使用引导网格，并且正在寻找一种快速/非侵入性的方法，用网格垂直显示一些元素

例如，如果我通常会获得（即使用col-md-3）：

在我的版本中，我会使用“转置”版本：

这只是服务器端的问题，还是有一种方法可以通过网格CSS和/或javascript实现这一点

---

S

在您的原始示例中，看起来您正在打开一个

ul

标记，然后给每个

li

一类

col-md-3

要获得所需的结果，您可以打开4个

ul

标签（每列一个），并为每个标签提供一类

col-md-3

。然后，这些

ul

标记中的

li

标记将不需要任何类

下面是该代码的外观：

<ul class="col-md-3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

<ul class="col-md-3">
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

<ul class="col-md-3">
    <li>I</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
</ul>

<ul class="col-md-3">
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
</ul>

A
B
C
D


E
F
G
H


我
L
M
N


O
P
Q
R

---

这可能不是您希望实现的方式，但这将实现预期的结果。我希望这有帮助

你需要使用bootstrapv4，没有css可以帮你做到这一点。我不知道Bootstrapv4会有什么帮助。这是一个jQuery/javascript问题。甚至AngularJS。我认为最简单的解决方案是服务器端。反转回音/渲染循环…不是css，当然也不是引导…我知道这听起来很奇怪，但这是客户严格要求的，因为我运气不好。需要使用bootstrap3，在任何情况下都不能切换到4。这听起来不错，似乎可以满足我的需要-并且不需要使用/更改服务器端代码。谢谢

A E I O
B F L P
C G M Q
D H N R

<ul class="col-md-3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

<ul class="col-md-3">
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

<ul class="col-md-3">
    <li>I</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
</ul>

<ul class="col-md-3">
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
</ul>