Html css网格div在react组件中使用时未调整大小

我在我制作的一个示例公文包页面中制作了一个css网格布局，当我仅使用html/css时，它运行良好，响应迅速：代码如下：

没有响应的主机位于此处：

相同的反应组件如下所示：

我使用react、sass和node做了同样的操作，但是这个没有响应，确切地说，类

techStack

的

div

没有调整大小。 以下是网格布局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的链接：（没有响应）

我看了一下，但我无法找出差异的原因。我猜这是页面上其他地方的一种样式，或者是因为元素的结构略有不同

---

但是，如果您将图标的样式设置为“显示：内联块”，则可以解决问题。

我查看了一下，但无法找出差异的原因。我猜这是页面上其他地方的一种样式，或者是因为元素的结构略有不同

但是，如果您将图标的样式设置为“显示：内联块”，则可以解决问题。

您的图像图标（

.dev icon-*colored

）是内联级别

的列表：

前的伪元素，每个伪元素都包含在内联级别

i

元素中，它们都包含在块级

div

元素中

图标由第三方服务（）提供

无论出于何种原因，这些伪元素（如DeviceCon图标）都不会换行

但是，如果将DeviceCon代码（例如

内容：“\e845”

）切换为纯文本（例如

内容：“

”），则伪元素会自动换行

或者，如果将

div

容器从

display:block

（默认）切换到

display:flex

，则设备也会自动换行

因此，问题似乎归结为块容器中的设备

以下是一个简单的总体解决方案：

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

您的图像图标（

.dev icon-*colored

）是一个内联级别

：before

伪元素的列表，每个伪元素都包含在内联级别

i

元素中，它们都包含在块级别

div

元素中

图标由第三方服务（）提供

无论出于何种原因，这些伪元素（如DeviceCon图标）都不会换行

但是，如果将DeviceCon代码（例如

内容：“\e845”

）切换为纯文本（例如

内容：“

”），则伪元素会自动换行

或者，如果将

div

容器从

display:block

（默认）切换到

display:flex

，则设备也会自动换行

因此，问题似乎归结为块容器中的设备

以下是一个简单的总体解决方案：

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

---

寻求代码帮助的问题必须包含在问题中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。@Paulie_D我签出了那个问题，并通过html验证程序运行了我的代码，我将尝试尽快设置一个fiddle并将其发布到这里。寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请看。@Paulie_D我签出了那个问题，并通过html验证程序运行了我的代码，我将尝试尽快设置一个fiddle并将其发布到这里。谢谢，这确实解决了问题。我仍然不知道是什么原因导致了这个问题，也不知道如何找到答案。谢谢，这确实解决了这个问题。我仍然不知道是什么原因导致了这个问题，也不知道如何找到答案。谢谢你给出了如此详细的答案，问题是，相同的代码（据我所比较，在这里工作：）。这让我对自己的错误产生了很多困惑。唯一的区别是，我在与css网格的codepen链接中使用了原生html和css。第二个是一个bundle.js文件，它是使用webpack（来自一堆react组件）构建的，但是生成的html/css实际上是相同的。这有点神秘。这里有很多第三方代码。在这种严重的冲突中，有些地方存在冲突。感谢您给出如此详细的答案，问题是，相同的代码（据我所比较，在这里工作：）。这让我对自己的错误产生了很多困惑。唯一的区别是，我在与css网格的codepen链接中使用了原生html和css。第二个是一个bundle.js文件，它是使用webpack（来自一堆react组件）构建的，但是生成的html/css实际上是相同的。这有点神秘。这里有很多第三方代码。在这种严重的混合中，有一种冲突。