React-bootstrap页脚列垂直堆叠如何改为水平排布并避免元素覆盖

核心问题及修复方案 #

1. 修复className拼写错误 #

你的代码中多处存在className拼写错误，导致Bootstrap栅格样式完全不生效，这是列垂直堆叠的首要原因：

• 错误写法：classNames="container"、clasName="row"
• 正确写法：统一为className="xxx"

2. 修正栅格结构 #

Bootstrap栅格系统必须遵循 container > row > col 的层级规则，你当前在列层级内嵌套了多余的row，打乱了布局结构，三个列应直接放在同一个外层row下即可，不需要额外嵌套row。

3. 移除无效属性 #

你写在div标签上的display="flex"不属于合法的HTML/React属性，不会生效，直接删除即可，Bootstrap的row类本身自带flex布局属性，只要className拼写正确就会自动生效。

4. 确认Bootstrap CSS引入 #

仅安装react-bootstrap依赖不足以生效，必须在项目入口文件（如index.js、App.js）顶部引入Bootstrap的CSS文件：

import 'bootstrap/dist/css/bootstrap.min.css';

以上问题修复后，布局计算会恢复正常，其他容器的元素也不会再侵入页脚区域。

修正后的参考代码 #

import React from "react";
import styled from "styled-components";
const Footer = () => {
  return (
    <FooterContainer className="main-footer">
      <div className="footer-middle">
        <div className="container">
          <div className="row">
            {/* 列1 */}
            <div className="col-md-4 col-sm-6 col-xs-4">
              <h4>lorem</h4>
              <ul className="list-unstyled">
                <li>
                  <a href="/"> Lorem ipsum </a>
                </li>
                <li>
                  <a href="/">Lorem ipsum </a>
                </li>
                <li>
                  <a href="/">Lorem ipsum </a>
                </li>
                <li>
                  <a href="/">Lorem ipsum </a>
                </li>
                <li>
                  <a href="/">Lorem ipsum </a>
                </li>
              </ul>
            </div>
            {/* 列2 */}
            <div className="col-md-4 col-sm-6 col-xs-4">
              <h4>lorem</h4>
              <ul className="list-unstyled">
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
              </ul>
            </div>
            {/* 列3 */}
            <div className="col-md-4 col-sm-6 col-xs-4">
              <h4>lorem</h4>
              <ul className="list-unstyled">
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
              </ul>
            </div>
          </div>
          {/* 页脚底部 */}
          <div className="footer-bottom">
            <p className="text-xs-center">
              &copy;{new Date().getFullYear()}
              Reserved
            </p>
          </div>
        </div>
      </div>
    </FooterContainer>
  );
};

export default Footer;

const FooterContainer = styled.footer`
  .footer-middle {
    padding-top: 3rem;
    color: var(--mainWhite);
  }
  .footer-bottom {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
  ul li a {
    color: var(--mainGrey);
    text-decoration: none;
  }
  ul li a:hover {
    color: var(--mainLightGrey);
  }
`;

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