React项目中实现页脚Github与LinkedIn图标并排的方法

问题描述 #

我正在构建React作品集，已引入react-bootstrap，希望页脚中的Github和LinkedIn图标并排显示，且在滚动至页面末尾时固定在屏幕底部。目前两个图标垂直堆叠在页面底部中间，行间距过大。

原Footer组件代码 #

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';

function App() {
  return (
    <div className="app">
        <Footer />
    </div>
  );
}

export default App; 

解决方案 #

1. 修复图标并排显示问题 #

图标垂直堆叠是因为<ul>和<li>默认的块级布局，以及<h3>自带的上下外边距导致行间距过大。添加以下CSS规则：

/* 让ul横向排列，清除默认列表样式 */
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem; /* 控制图标之间的间距，可按需调整 */
}

/* 移除h3的默认外边距，减少行间距 */
footer .icon {
  margin: 0;
}

2. 实现滚动到页面末尾时固定在底部 #

将页脚设置为粘性定位，替代原来的margin-top: auto，这样页面未滚动到底时，页脚随内容流动；滚动到底部后会固定在屏幕底部：

footer {
  background-color: gray;
  text-align: center;
  padding: 8px;
  position: sticky;
  bottom: 0;
  z-index: 100; /* 确保页脚不会被其他内容遮挡 */
}

3. 利用React Bootstrap简化布局（可选） #

既然已经引入了react-bootstrap，直接使用其内置的Flex组件可以省去自定义CSS，让代码更简洁：

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

function Footer() {
  return (
    <footer className="font-link bg-gray py-2">
      {/* 使用react-bootstrap的Flex组件实现居中+横向排列 */}
      <Flex justifyContent="center" gap={3}>
        <a 
          href="https://github.com/PhuongHoang68"
          target="_blank"
          rel="noreferrer"
        >
          <AiFillGithub size="3rem" />
        </a>
        <a 
          href="https://www.linkedin.com/in/phuong-hoang-a0b4901a5/"
          target="_blank"
          rel="noreferrer"
        >
          <AiFillLinkedin size="3rem" />
        </a>
      </Flex>
    </footer>
  )
}

export default Footer;

最终完整CSS（不使用React Bootstrap组件时） #

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

footer {
  background-color: gray;
  text-align: center;
  padding: 8px;
  position: sticky;
  bottom: 0;
  z-index: 100;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

footer .icon {
  margin: 0;
}

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;
}

内容的提问来源于stack exchange，提问作者PhuongHoang68