html - Bootstrap/Foundation 中的多列列表

Question

我正在尝试找出在 Bootstrap 或 Foundation 等网格框架中创建垂直多列列表的最佳方法。我已经知道如何通过几种方式做到这一点，但我不确定我想要的方式是否可以仅使用 CSS。我需要 li 标签直接出现在 ul 标签之后，中间没有 col-*-* div。

为了最好地描述我想要什么，我将首先向大多数人展示一个大致包含 3 列的列表:

<ul class="row">
    <li class="col-sm-4">A</li>
    <li class="col-sm-4">B</li>
    <li class="col-sm-4">C</li>
    <li class="col-sm-4">D</li>
    <li class="col-sm-4">E</li>
    <li class="col-sm-4">F</li>
</ul>

这里的问题是输出不会垂直读取，这就是我想要的。这会产生更多的水平列表，其中列的顺序不符合要求，如下所示:

A    B    C
D    E    F

现在这是我的解决方案(不够好):

<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <ul>
                <div class="col-sm-4">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                </div>
                <div class="col-sm-4">
                    <li>H</li>
                    <li>I</li>
                    <li>J</li>
                    <li>K</li>
                    <li>L</li>
                    <li>M</li>
                    <li>N</li>
                </div>
                <div class="col-sm-4">
                    <li>O</li>
                    <li>P</li>
                    <li>Q</li>
                    <li>R</li>
                    <li>S</li>
                    <li>T</li>
                    <li>U</li>
                </div>
            </ul>
        </div>
    </div>
</div>

这样我得到了想要的订单结果:

A    H    O
B    I    P
C    J    Q
D    K    R
E    L    S
F    M    T
G    N    U

但这对我来说还不够好，因为 li 标签不会紧跟在 ul 标签之后。

有什么方法可以在不将 li 标记组彼此分开的情况下完成这个 3 列列表？

注意:我还想指出像示例 #1 那样执行此操作的好处，它会为您提供自动列，因此如果您正在开发应用程序或使用 PHP，这将非常有用。如果可能的话，我希望保留该功能。

提前感谢您提供的任何帮助。这很难描述，所以如果您不明白，请问我一个问题以澄清。谢谢!

Answer 1

我相信这就是您正在尝试做的事情，或者希望它能帮助您准确地弄清楚您正在尝试做什么。

示例 1:列 作为无序 列表类和列表项中的内容。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-info">A</li>
      <li class="alert alert-info">B</li>
      <li class="alert alert-info">C</li>
      <li class="alert alert-info">D</li>
      <li class="alert alert-info">E</li>
      <li class="alert alert-info">F</li>
      <li class="alert alert-info">G</li>
    </ul>
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-danger">H</li>
      <li class="alert alert-danger">I</li>
      <li class="alert alert-danger">J</li>
      <li class="alert alert-danger">K</li>
      <li class="alert alert-danger">L</li>
      <li class="alert alert-danger">M</li>
      <li class="alert alert-danger">N</li>
    </ul>
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-warning">O</li>
      <li class="alert alert-warning">P</li>
      <li class="alert alert-warning">Q</li>
      <li class="alert alert-warning">R</li>
      <li class="alert alert-warning">S</li>
      <li class="alert alert-warning">T</li>
      <li class="alert alert-warning">U</li>
    </ul>
  </div>
</div>

示例 2:嵌套网格，其中 行 作为无序列表类，列 作为列表项，其中包含您的内容。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-info">A</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">B</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">C</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">D</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">E</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">F</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">G</div>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-danger">H</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">I</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">J</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">K</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">L</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">G</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">N</div>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-warning">O</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">P</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">Q</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">R</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">R</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">T</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">U</div>
        </li>
      </ul>
    </div>
  </div>
</div>