当 Grid 过早换行时(在 11 行而不是 12 行之后)Primeflex Flexgrid 的 CSS 修复?

标签 css angular sass flexbox primeng

我正在根据 documentation 使用 Primeflex Flexgrid , 但它会在 11 行后换行,相反,它应该只在使用 12 行时换行。 有人有解决办法吗? package.json 中的版本: "primeflex": "^1.0.0-rc.1",

我在我的 angular.json 中包含了“node_modules/primeflex/primeflex.css”,否则它根本不会包装任何东西,所以这不是问题。 我怀疑问题出在图书馆的某个地方,但我太新手了,无法找到解决方案(还)并且我自己用 SCSS 类简单地覆盖它。 我还在 Primflexes 上发现了一个现有问题 Github ,但是另一个用户报告的解决方案解释得不够好,我无法理解。

查看我的 Stackblitz问题演示。

我希望它能像 this 那样工作(抱歉图片链接,但显然我不够聪明,无法正确包含图片)。

此外,如果有更多 Rep 的人可以添加标签“Primflex”,那就太好了。

最佳答案

因为可能不是每个人都知道如何处理我标记为已接受的答案,所以我根据@piyush jain 的建议添加了我如何实现修复的描述。 我是这样做的:

  1. 我创建了一个新的 SCSS 文件“_flexgridfix.scss
  2. 我将文件放在 src 文件夹中,与“styles.scss”所在的同一层级
  3. 然后我将 piyush jains 代码添加到文件中(只有 scss 类名和值“box-sizing: border-box;”,而不是其他值,它们不需要)
  4. 然后我将新的 scss 文件导入到“styles.scss”中,如下所示: @import "flexgridfix.scss";

注意:我必须在开头使用下划线“_”明确命名新文件,否则 Visual Studio Code 无法正确解析导入。 效果很好,现在可以正确包装。

编辑:显然它现在已修复:参见 https://github.com/primefaces/primeflex/issues/8#issuecomment-539873278

关于当 Grid 过早换行时(在 11 行而不是 12 行之后)Primeflex Flexgrid 的 CSS 修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57407432/

相关文章:

angular - 如何创建具有多个路由的 Angular2 库?

css - 更少的祖 parent 有类选择器

html - 导致导航栏元素落在导航栏之外的汉堡菜单

html - 为什么css3是:target not working?

javascript - CSS,工具提示 : Having a auto-resize background according to tooltip text

html - CSS border-radius 仅围绕模态 div 窗口的一个 Angular

css - Scss @mixin 函数

php - 我的 CSS 有什么问题?

angular - 如何将动画添加到模板基于 ngTemplate 的 Angular 中的组件

angular - 从另一个组件 Angular 获取值 4