Question

使用Bootstrap 4，我怎么能得到这样的东西：

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

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

我可以使用column-width和column-count like this，但是我想知道是否可以使用Bootstrap 4 grid system达到相同的效果。

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

尝试像我一样使用 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>

Answer 3

Bootstrap的网格系统使建立列和行变得非常容易。 documentation here有一些非常好的示例，但是您只需要将元素包装在row和col类中。您还可以更改这些列在不同屏幕宽度下的显示方式，以使布局响应浏览器宽度。 Play with my JSbin example来查看Bootstrap类如何更改UI。

<ul class="row">
    <div class="col">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
    <div class="col">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </div>
</ul>

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

3 个答案: