React Bootstrap导航栏中React Router NavLink元素间无法设置边距的问题求助

我尝试使用React Bootstrap创建一个简单的导航栏，代码如下：

import React from 'react';
import { NavLink } from 'react-router-dom';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Container from 'react-bootstrap/Container';
import './NavbarDefault.css';
const DefaultNavbar = () => {
  return (
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">Demo</Navbar.Brand>
        <Nav className="mer-auto">
          <NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/login">
            Login
          </NavLink>
          <NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/register">
            Sign up
          </NavLink>
        </Nav>
      </Container>
    </Navbar>
  );
};
export default DefaultNavbar;

该导航栏功能正常，但“Login”和“Sign up”这两个链接之间没有任何内边距。我尝试给NavLink添加Bootstrap的CSS类mr-3，但没有产生任何效果；我还尝试用div包裹这两个NavLink并在div上添加mr-3类，同样没有作用。请问我哪里操作出错了？

你遇到的问题主要有两个原因：一是没有利用React Bootstrap提供的Nav.Link组件来集成样式，二是代码里有个小的拼写错误可能影响布局优先级。我给你两个可行的解决思路：

方法一：用React Bootstrap的Nav.Link包裹NavLink #

React Bootstrap的Nav组件内部对直接子元素的样式有特定的优先级控制，直接给NavLink加Bootstrap间距类会被组件的内置样式覆盖。你可以用Nav.Link来包裹NavLink，通过as={NavLink}属性把它转换成React Router的导航链接，这样既能保留Bootstrap的样式支持，又能使用路由功能：

import React from 'react';
import { NavLink } from 'react-router-dom';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Container from 'react-bootstrap/Container';
import './NavbarDefault.css';

const DefaultNavbar = () => {
  return (
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">Demo</Navbar.Brand>
        {/* 修正拼写错误：mer-auto → me-auto（Bootstrap 5的正确类名） */}
        <Nav className="me-auto">
          <Nav.Link 
            as={NavLink} 
            className="nav-link-custom mr-3" 
            activeClassName="nav-link-custom-active" 
            to="/login"
          >
            Login
          </Nav.Link>
          <Nav.Link 
            as={NavLink} 
            className="nav-link-custom" 
            activeClassName="nav-link-custom-active" 
            to="/register"
          >
            Sign up
          </Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
};

export default DefaultNavbar;

这里我还修正了mer-auto的拼写错误——正确的类名是me-auto（Bootstrap 5中用me/ms代替mr/ml，对应逻辑方向的margin-end/margin-start），虽然你说功能正常，但修正后能避免潜在的布局问题。

方法二：在自定义CSS类中添加间距 #

如果你不想使用Nav.Link，可以直接在你的自定义CSS类nav-link-custom中添加外边距：

.nav-link-custom {
  margin-right: 1rem; /* 相当于Bootstrap的mr-3（1rem=16px，mr-3对应1rem） */
  /* 保留你原来的其他自定义样式 */
}

这种方式更直接，完全通过自定义样式控制间距，不会和React Bootstrap的内置样式冲突。

这两种方法都能解决你链接之间没有间距的问题，你可以根据自己的习惯选择~

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