primeng flex 网格，设置 col 大小小于 1/12 Angular 8答案

【问题标题】：primeng flex grid, set col size smaller than 1/12 Angular 8primeng flex 网格，设置 col 大小小于 1/12 Angular 8
【发布时间】：2021-05-17 12:29:53
【问题描述】：

在primeng网格中，如果你有2列并且你想要这样：

第一个占总空间的 1/13
第二个拿下剩下的。

我试过了

<div class="p-grid p-nogutter">
  <div class="p-col-1">
    toto
  </div>
  <h1 class="p-col-11">titi</h1>
</div>

但如果我希望 toto div 更小，我没有找到解决方案。

最终目标是通过 p-grid 实现这一目标：

我尝试了什么：

我试过了：

 <div class="p-d-inline-flex p-ai-center">
        <button appBackButton pButton pRipple type="button" icon="pi pi-arrow-left" class="p-button-rounded p-col-1 p-mr-4"></button>
        <div class="p-flex">
            <h1>titi</h1>
            <span>blablablabla</span>
        </div>
 </div>

这就是结果

您注意到按钮没有与titi 对齐，而是与整个第二列对齐，这不是目的。

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

grid flex 仅适用于 12 节。如果您有 div 所需的确切高度/宽度，您可以将 flex 列设置为固定。

<div class="p-grid p-nogutter">
  <div class="p-col-fixed" style="width:100px">
    toto
  </div>
  <h1 class="p-col">titi</h1>
</div>

见固定宽度列部分here

【讨论】：

如果我使用这个解决方案并且我有一个 div 的第二行，我想与 titi div 对齐，那么“p-offset-1”将不再起作用，这很烦人跨度>
真的。一个解决方法是让任何空的 div 的长度与 toto 的长度相同，但我同意如果你有很多行它会很烦人
您的代码可以从网格中提取 toto 吗？
我已将尝试和结果添加到原始问题中