javascript - Bootstrap 3.0 网格 - 如何垂直转置它们？

Question

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

例如，如果我通常会获得(即使用 col-md-3):

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

在我的版本中，我会有“转置”版本:

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

这只是服务器端问题，还是有一种方法可以使用网格 CSS 和/或 javascript 来实现？

小号

Answer 1

在您的原始示例中，您似乎正在打开一个 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>

这可能不是您想要完成此任务的确切方式，但这将达到预期的结果。希望对您有所帮助!