Question

我试图找出在Bootstrap或Foundation等网格框架中创建垂直多列列表的最佳方法。我已经知道如何以两种方式做到这一点，但我想要的方式我不确定是否可以用CSS做。我需要li代码直接位于ul代码后面，而col-*-* div之间没有<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> div。

为了最好地描述我想要的内容，我首先会展示大多数人会大致列出3列列表：

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代码不会立即跟随。

我是否有办法在不将uicontrol标签组彼此分开的情况下完成此3列列表？

注意：我还想指出像示例＃1这样做的好处，它可以为您提供自动列，以便在您使用应用或使用PHP时非常棒。我希望尽可能保留该功能。

提前感谢您的任何帮助。这很难描述，所以请问我一个问题，以澄清你是否理解。谢谢！

Answer 1

我相信这是你正在尝试做的事情，或者希望它可以帮助你弄清楚你正在尝试做什么。

示例1：columns作为unordered列表类以及列表项中的内容。

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap / Foundation中的多列列表

1 个答案: