我怎样才能在 React 应用程序的页脚中并排显示我的两个图标？

Question

我正在建立一个反应组合。 我正在努力设计我的页脚。 我只想在上面包含 Github 和 LinkedIn 的图标。 我想让它们并排放置，并且在您到达页面末尾时位于屏幕底部。 目前，这两个图标垂直堆叠在底部，在页面中间，两行之间有很大的空间。 我已经实施了反应引导程序。

这是我的页脚组件：

 import {AiFillGithub} from "react-icons/ai";
 import {AiFillLinkedin} from "react-icons/ai";

function Footer() {
    return (
        <footer className="justify-content-center font-link">
            <div className="primary flex-row center">
                <ul className="flex-row">
                    <li className="links">
            <a href="https://github.com/PhuongHoang68"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillGithub size="3rem"/></h3>
            </a>
            </li>
            <li className="links">
            <a href="https://www.linkedin.com/in/phuong-hoang-a0b4901a5/"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillLinkedin size="3rem"/></h3>
            </a>
            </li>
            </ul>
            </div>
        </footer>
    )
}

export default Footer;

这是我的相关 css：

.App {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  background-color: gray;
  text-align: center;
  margin-top: auto;
  padding: 8px;
}
html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.5;
  font-size: 18px;
  background: var(--dark);
  color: var(--light);
  font-family: 'Poiret One', cursive;

} 

这是我的 app.js（只有与页脚相关的部分）：

import Footer from './components/Footer';

        <div className="app">
            <Footer />
        </div>

    


export default App; 

我尝试了很多方法，但没有任何效果。 我已经包含了上面的代码。 请帮助我，我真的很感激

Answer 1

似乎ul有 class flex-row但没有将其display设置为flex ，因此未启用 flex 行为。

对于解决此问题的 Bootstrap 解决方案，也许可以尝试将d-flex 、 justify-content-center 、 align-items-center和（如果还需要删除默认列表样式） list-unstyled到className的ul名。

简化演示： stackblitz

<ul className="d-flex flex-row justify-content-center align-items-center list-unstyled">
...
</ul>