Question

我有一些组件是由for循环根据服务器中对象的数量生成的，这些组件将显示在前端

<div class="container-fluid">
    <div class="component">
        <div class="row card">
         <app-component class="list-group-item col" [User]="comp.user"
                        [title]="comp.title"
                        *ngFor="let comp of component"></app-component>
       </div>
     </div>
</div>

我希望组件在中间对齐，而最后一行将在左侧对齐。当前的情况是，当我希望最后一行组件向左对齐时，组件位于中心对齐。

How our current html looks like

每边的边距保持不变，与零件数量有关。

该组件具有固定的大小，并且随着屏幕的变大（或调整），它将在每一行中容纳更多的组件，同时组件之间的间隙会扩大。

How it looks like when the screen adjust to bigger

与图像中的分量一样，但是如果还有1个分量，它将被放置在第三行的中心。在这种情况下，我希望将最后一个组件放置在第三行中。

这是我们当前的scss文件：

.component {
    display: inline-block;
    margin-right: 10%;
    margin-left: 10%;
    > .card {
        display: flex;
        flex-wrap: wrap;
        > app-component {
            margin-top: 2rem;
            margin-right: 3rem;
        }
    }
}

主要问题是，所有组件都是由for循环根据我从服务器获得的对象数生成的。因此，我无法为其自定义每个组件

Answer 1

我不确定我是否已撤消并满足您的需求。要么看看flexboxes：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

或者为什么不使用BS4列网格???

此外，您还要混合组件和网格类：只有col可以是行的子级。

<div class="component">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
      CARD CONTENT GOES HERE
      </div>
    </div>
  </div>
</div>

告诉我们更多有关您的研究的信息。

Answer 2

通过使用引导程序4的网格系统，它可以根据屏幕大小定义HTML元素将使用多少列，并解决了我的问题。

<div class="container root">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4 col-xl-3 card"
      *ngFor="let comp of component>
      <app-component [user]="comp.user"
                     [title]="comp.title"></app-component>
    </div>
  </div>
</div>

bootstrap类根据屏幕的大小和更改类而定，您可以在https://getbootstrap.com/docs/4.1/layout/grid/

上了解更多信息。

HTML / SCSS如何使用网格将生成的对象居中，同时左对齐

2 个答案: