Question

我有一个关于bootstrap列的问题。我正在创建一个文件浏览器，我希望它类似于Windows文件浏览器。问题是，Windows是垂直排序文件，我的代码是水平排序。到目前为止，我已经这样了：

A B C

D E F

我希望它像那样：

A C E

B D F

我的代码：

<div class="container">
   <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" *ngFor="let entity of entities">
         //content here
      </div>
   </div>
</div>

我猜我需要在for循环中使用一些索引，但是，我在Angular中不够流畅地干净利落地执行它：/实体数组的长度也经常变化，可以是空的或甚至包含一个houndred实体。有什么想法吗？

Answer 1

另一种解决方法是使用CSS列：

    @media (min-height: 576px) {
        .cols {
            columns: 2 200px;
        }
    }

    @media (min-height: 768px) {
        .cols {
            columns: 3 200px;
        }
    }

    @media (min-height: 992px) {
        .cols {
            columns: 4 200px;
        }
    }

<div class="container">
    <div class="cols">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
        <div>J</div>
        <div>K</div>
        <div>L</div>
        <div>M</div>
        <div>N</div>
    </div>
</div>

有关CSS列的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/columns

可在此处检查各种浏览器的可用性： https://caniuse.com/#feat=multicolumn

更改bootstrap列＆＃39;内容从水平流向垂直

1 个答案: