如何在bootstrap中垂直订购网格
我在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> order> order class取决于屏幕宽度，例如：
<div class="col border order-4 order-sm-7 order-lg-2">Field4</div>
如果将来添加了场ES，则该接缝很容易容易出现质量和错误。
这是要走的路，还是有更简单的解决方案？
I have a simple grid layout in Bootstrap 5 like this:
<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>
Depending on the screen width, it looks like this:
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 ]
...
However, I want it to be ordered vertically:
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 ]
...
A solution I found is to use the order class depending on the screen width, like:
<div class="col border order-4 order-sm-7 order-lg-2">Field4</div>
This seams to be a mass and error prone, if a field es added in the future.
Is this the way to go, or is there a simpler solution?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以在父元素上添加自定义类，并使用其他CSS属性
列计数和两个断点，以减少列计数。还要从父元素中删除行类。You can add custom class on the parent element and with the additional CSS property
column-countand two breakpoints to reduce thecolumn-count. Also remove the row class from the parent element.