时间戳

首页 > 解决方案 > HTML/SCSS 如何在左对齐时使用网格将生成的对象居中

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

问题描述

我有一些组件是由基于来自服务器的对象数量的 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>

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

我们当前的 html 看起来如何

每边的边距与组件的数量保持相等。

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

屏幕调大后的样子

如图所示，偶数组件，但如果还有 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 循环生成的。因此我不能为他们自己定制每个组件

标签： htmlsassresponsive-designbootstrap-4

解决方案

我不确定我是否完全不了解您的需求。要么看看 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>

告诉我们更多关于你的研究。

推荐阅读