如何在Bootstrap中垂直排列网格

Question

我在Bootstrap 5中有一个简单的网格布局，如下所示：

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
    <div class="col border">Field1</div>
    <div class="col border">Field2</div>
    <div class="col border">Field3</div>
    <div class="col border">Field4</div>
    <div class="col border">Field5</div>
    <div class="col border">Field6</div>
    <div class="col border">Field7</div>
    <div class="col border">Field8</div>
    <div class="col border">Field9</div>
</div>

取决于屏幕的宽度，它看起来如下：

Large                Medium         Small
[ 1 ] [ 2 ] [ 3 ]    [ 1 ] [ 2 ]    [ 1 ] 
[ 4 ] [ 5 ] [ 6 ]    [ 3 ] [ 4 ]    [ 2 ] 
[ 7 ] [ 8 ] [ 9 ]    [ 5 ] [ 6 ]    [ 3 ]
                     [ 7 ] [ 8 ]    [ 4 ]
                     [ 9 ]          [ 5 ]
                                    ...

然而，我希望它是垂直订购：

Large                Medium         Small
[ 1 ] [ 4 ] [ 7 ]    [ 1 ] [ 6 ]    [ 1 ] 
[ 2 ] [ 5 ] [ 8 ]    [ 2 ] [ 7 ]    [ 2 ] 
[ 3 ] [ 6 ] [ 9 ]    [ 3 ] [ 8 ]    [ 3 ]
                     [ 4 ] [ 9 ]    [ 4 ]
                     [ 5 ]          [ 5 ]
                                    ...

我发现的一个解决方案是根据屏幕宽度使用order类，如下所示：

<div class="col border order-4 order-sm-7 order-lg-2">Field4</div> 

如果将来增加了一个字段，那么这个接缝就很容易出现质量和错误。

这是该走的路，还是有更简单的解决办法？

Answer 1

您可以在父元素上添加自定义类，并使用附加的CSS属性column-count和两个断点来减少column-count。还从父元素中删除行类。

​

.column-order {
  --count: 3;
  column-count: var(--count);
  column-gap: 0;
}

.column-order>div {
  width: 100%;
}

@media screen and (max-width: 992px) {
  .column-order {
    --count: 2;
  }
}

@media screen and (max-width: 576px) {
  .column-order {
    --count: 1;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="column-order">
  <div class="col border">Field1</div>
  <div class="col border">Field2</div>
  <div class="col border">Field3</div>
  <div class="col border">Field4</div>
  <div class="col border">Field5</div>
  <div class="col border">Field6</div>
  <div class="col border">Field7</div>
  <div class="col border">Field8</div>
  <div class="col border">Field9</div>
  <div class="col border">Field10</div>
  <div class="col border">Field11</div>
</div>

​