Next.js中Bootstrap导航栏链接间距调整问题求助

问题原因 #

你当前的代码里，Nav.Link直接放在了Navbar.Collapse下，没有嵌套在Nav组件内部。Bootstrap的Nav组件默认会为子级的Nav.Link元素添加间距样式（比如margin-right或padding），缺少这个容器就会导致链接紧挨在一起。

解决方案 #

方法1：正确使用Bootstrap组件嵌套（推荐） #

把Nav.Link包裹在Nav组件中，利用Bootstrap内置的样式自动生成间距：

"use client";

import Link from "next/link";
import { Navbar, Nav, Container } from "@/components/bootstrap";

export default function NavigationBar() {
  return (
    <Navbar
      bg="primary"
      variant="dark"
      sticky="top"
      expand="sm"
      //collapseOnSelect
    >
      <Container>
        <Navbar.Brand as={Link} href="/">
          The Platform
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="main-navbar"></Navbar.Toggle>
        <Navbar.Collapse id="main-navbar">
          {/* 添加Nav组件包裹Nav.Link */}
          <Nav>
            <Nav.Link href="/Cases">Cases</Nav.Link>
            <Nav.Link href="/Referrals">Referrals</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

方法2：自定义样式添加间距 #

如果不想依赖Bootstrap的Nav组件，也可以通过自定义类或者行内样式给Nav.Link添加间距：

方式A：行内样式

<Nav.Link href="/Cases" style={{ marginRight: "1rem" }}>Cases</Nav.Link>
<Nav.Link href="/Referrals">Referrals</Nav.Link>

方式B：自定义CSS类

先在全局样式文件（比如globals.css）中添加：

.nav-link-spacing {
  margin-right: 1.5rem;
}

然后在组件中使用：

<Nav.Link href="/Cases" className="nav-link-spacing">Cases</Nav.Link>
<Nav.Link href="/Referrals">Referrals</Nav.Link>

效果说明 #

使用方法1后，链接会自动获得Bootstrap统一设计的间距，既符合组件库的设计规范，也能保证响应式场景下的样式一致性；方法2适合需要自定义特殊间距的场景。

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