css-grid div在反应组件中使用时不调整大小

问题描述 投票:0回答:2

我已经在我已经制作的示例组合页面中制作了一个css网格布局,当我用html / css做它时工作正常并且响应:代码在这里:https://codepen.io/abhinavthinktank/full/YevQNq/

没有响应的那个主持在这里:https://abhinav-m.github.io/

相同的反应成分在这里:https://github.com/abhinav-m/personal-portfolio/tree/master/src/components

我使用react,sass和node做了同样的事情,但是这个没有响应,确切地说div与类techStack没有调整大小。这是网格布局css:

.gridContainer {
 display: grid;
 grid-template-rows: 15px 10% 20% 10% 20% 20% 20% 25px;
 grid-template-columns: 10% 80% 10%;
 grid-row-gap: 25px;
 justify-items: center; }

div class='techStack' css:

.techStack {
 grid-row: 6 / 7;
 grid-column: 2 / 3;
 background: bisque; }

两者的CSS看起来都是一样的!我不明白为什么其中一个不起作用。

链接JSFIDDLE:https://jsfiddle.net/69z2wepo/121098/(没有响应)

html css reactjs responsive-design css-grid
2个回答
1
投票

你的图像图标(.dev-icon-* colored)是一个内联级别的::before伪元素列表,它们都包含在一个内联级别的i元素中,它们都包含在块级div元素中。

图标由第三方服务(devicon)提供。

无论出于何种原因,这些伪元素(如devicon图标)都不会换行。

但是,如果您使用纯文本(例如content: "\e845")切换出devicon代码(例如content: "text text text text"),则伪元素会换行。

或者,如果你将div容器从display: block(默认值)切换到display: flex,那么devicons也会换行。

所以问题似乎归结为块容器中的devicons。

这是一个简单的整体解决方案:

div.icons {
    display: flex;
    flex-wrap: wrap;
}

1
投票

我看了一眼,但我无法弄清楚差异的原因是什么。我猜它是页面上其他地方的一种风格,或者因为元素的结构略有不同。

但是,如果您将图标的样式设置为display: inline-block,那么它可以解决您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.