css - 网格中的 Accordion 将内容向下推

标签 css flexbox material-ui grid accordion

我有一个 Accordion 网格,如下面的代码和框中所示。问题是,当我打开其中一个 Accordion 时,它会推下下面一行中的所有 Accordion ,而所需的行为是只推下它正下方的 Accordion ,而下排中的其他 Accordion 保持在同一位置。为了达到这个效果,下面的代码需要修改什么?

https://codesandbox.io/s/basicaccordion-demo-material-ui-forked-sw4juk?file=/demo.tsx

enter image description here

最佳答案

您可以利用Grid组件的强大功能来获得您想要的行为。在网格内嵌套网格是魔法:

Grid Layout

要使用 Material Grid 组件执行此操作,布局需要如下所示:

enter image description here

EXAMPLE (I forked your sandbox)

enter image description here

关于css - 网格中的 Accordion 将内容向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72536904/

相关文章:

css - Bootstrap "col"配置,xl 处没有编号

reactjs - React + Material-UI : list should have a unique "key" prop

javascript - 为什么 Bootstrap 词缀会跳到顶部

html - 如何在容器内垂直和水平居中元素?

html - 在较小的屏幕尺寸上,列表不以 Flexbox 为中心

react-native - React native 对齐图标和文本

reactjs - Material-ui 的 Switch 组件 onChange 处理程序未触发

javascript - Reactjs Material-UI - 箭头函数上的意外标记

html - 内联按钮布局打破了下拉内容布局

html - 不需要的表格单元格边框