时间戳

首页 > 解决方案 > 我如何使这个手风琴响应并以页面为中心？

reactjs - 我如何使这个手风琴响应并以页面为中心？

问题描述

我正在构建的FAQ部分正在使用react，现在我加载了react-faq-component库（标题和内容只是它附带的默认值）：


import Faq from 'react-faq-component';

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content: "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content: "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }]
}

const FAQ = () => {
    return (
        <div>
             <Faq data={data}/>
        </div>
    )
}

export default FAQ

我将如何使这种对移动设备的响应以及将手风琴置于页面中心？我认为它align-items: center;在样式中使用但不起作用。

标签： reactjsaccordion

解决方案

最终输出：

在此处输入图像描述

import React from "react";
import "./style.css";
import Faq from "react-faq-component";

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content:
        "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content:
        "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }
  ]
};

const FAQ = () => {
  return (
    <div className="main">
      <div className="faq">
        <Faq data={data} />
      </div>
    </div>
  );
};

export default FAQ;

指定max-widthforFaq组件，并给出下面给出的main父divcss 样式：

CSS：

h1,
p {
  font-family: Lato;
}

.main {
  display: flex;
  width: 100%;
  padding-top: 10px;
  justify-content: center;
}
.faq {
  max-width: 400px;
}

工作演示：Stackblitz

推荐阅读