Bootstrap 如何使用引导拆分列中的数据

fnatzsnv 于 2023-01-22 发布在 Bootstrap

关注(0)|答案(1)|浏览(126)

以下示例将在xl上创建一个4列布局，在lg上创建3列布局，在sm上创建2列布局，默认为1列：

<div class="row">

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">A</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">B</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">C</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">D</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">E</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">F</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">G</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">H</div>

    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">I</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">J</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">K</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">L</div>

</div>

这很好用，但是我的数据是按字母顺序从左到右显示的：

ABCD
EFGH
IJKL

但我希望ABC在第一列，DEF在第二列，GHI在第三列，JKL在第四列......换句话说，根据屏幕的不同，按字母顺序从上到下分布在各列中：

ADGJ
BEHK
CFIL

AEI
BFJ
CGK
DHL

AG
BH
CI
DJ
EL
FL

A
B
C
D
E
F
G
H
I
J
K
L

我的第一个想法是循环数据，为每个屏幕大小创建“行”，并使用显示方法在相应的屏幕上显示它，但一定有更好的方法吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/75175074/how-to-split-data-in-columns-using-bootstrap

1条答案

按热度按时间

mwyxok5s1#

感谢@isherwood回复此帖子：How to order a grid vertically in Bootstrap
//参数设置

.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;
  }
}

//网页

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

虽然这样做确实有效，但我面临一个问题。在HTML中，我在每个div中添加了“py-1”，以便给内容留出一些空间。但在iPad上，这看起来像这样：

调整我的浏览器屏幕大小不会显示这个问题。它就像填充工作到下一个“列”？

赞(0）回复(0）举报 2023-01-22

我来回答

Bootstrap 如何使用引导拆分列中的数据

1条答案

相关问题

热门标签

最新问答