为什么我的图标被放置为列而不是行？

Question

我试图使用className =“ col s1”将这些图标与一行对齐，但是当我运行此代码时，它在列中显示在列中。我尝试删除容器标签，添加它，IVE尝试更改列大小，但是由于某种原因，它总是以列显示为列而不是行。

有什么办法可以使它起作用？

这是指代码的链接： project

main.jsx

import React, { useState, useEffect, useRef } from "react";
import Helmet from "react-helmet";
import Socials from "./Socials";
function Main(props) {
  const socialMedia = [
    {
      link: "https://www.linkedin.com/in/",
      icon: "linkedin"
    },
    {
      link: "https://github.com/",
      icon: "github"
    },
    {
      link: "https://www.youtube.com/",
      icon: "youtube"
    },
    {
      link:
        "mailto:[email protected]?subject=Felipe%20GD%20--%20Request%20To%20Contact",
      icon: "email"
    }
  ];

  return (
    <React.Fragment>
      <Helmet>
        <title>Felipe GD</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>
      <div className="container">
        <div clasName="row">
          {socialMedia.map((socials) => (
            <Socials
              getOpacity={null}
              getVisibility={null}
              link={socials.link}
              icon={socials.icon}
            />
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

export default Main;

socials.jsx

import React, { useEffect, useRef } from "react";
import { SocialIcon } from "react-social-icons";

function Socials(props) {
  let size = useRef("20");

  useEffect(() => {
    if (window.innerWidth > 500) {
      size.current = 50;
    } else {
      size.current = 25;
    }
  }, [size]);

  return (
    <React.Fragment>
      <div className="col s1">
        <SocialIcon
          id={props.icon}
          bgColor="#2C2C2C"
          fgColor="#ECCECE"
          network={props.icon}
          url={props.link}
        />
      </div>
    </React.Fragment>
  );
}

export default Socials;

我知道我可以通过不将其制成一个组件来使它起作用，但是对我来说，这看起来很干净，ID喜欢在可能的情况下使用地图功能。

Answer 1

看起来您正在使用Bootstrap库，但是package.json中没有依赖性。这意味着您应该安装此依赖关系

npm i react-bootstrap

：必须编辑小型错字：

<div clasName="row"> 

应该是：

<div className="row">

替代方法：

另一种方法是创建自己的样式。 可以在sandbox

您可以：

1. 创建“ styles.css”

2. 创建新类：

     .myrow {
        显示：Flex;
    }
    

3. 包括在您的组件中：

    导入” ./styles.css”
    

4. 为组件应用样式：

    ＆lt; div className =“ myrow”＆gt;
      {socialmedia.map（（（socials）=＆gt;（（
        ＆lt;社交
          getopacity = {null}
          getvisibility = {null}
          link = {socials.link}
          图标= {socials.icon}
        /＆gt;
      ）}}
    ＆lt;/div＆gt;