如何使用Bootstrap 4在多列中拆分列表？

Question

使用Bootstrap 4，我如何拥有这样的东西：

[ 1 ] [ 4 ]
[ 2 ] [ 5 ]
[ 3 ] [ 6 ]

换句话说，如何将一个列表分成相等的两列，仅使用一个将其垂直排序<ul>？因此，例如，我可以拥有动态数量的商品吗？

我可以使用column-width并且column-count 喜欢这样，但是我想知道是否可以使用Bootstrap 4网格系统实现相同的效果。

Answer 1

使用Bootstrap“ Grid”无法做到这一点。但是，您可以使用Bootstrap的卡片列并设置column-count...

  <ul class="list-unstyled card-columns">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
  </ul>

https://www.codeply.com/go/suY2Ci62Ji

Answer 2

示例column-count：

<ul class="list-unstyled card-columns" style="column-count: 2;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Answer 3

尝试像我一样使用flex ：

<div class="d-flex flex-row">
  <div class="d-flex flex-column">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
  </div>
  <div class="d-flex flex-column">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
  </div>
</div>