时间戳

首页 > 解决方案 > 无法在 React Router Navlink 之间设置边距

reactjs - 无法在 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;

导航栏工作正常，但链接“登录”和“注册”之间没有任何填充。我尝试将 Bootstrap css 类添加mr-3到，NavLink但这并没有什么不同。NavLink我还尝试将两个'都包装进去div并将mr-3类放在那里，但这也没有用。

有什么想法我在这里做错了吗？

标签： reactjsreact-routerreact-bootstrap

解决方案

如果他们只是<NavLinks>他们正在输出<a>&这些只是内联元素。给他们一个 CSS 属性display: inline-block;以允许填充和/或边距

推荐阅读