React-Bootstrap CSS问题

Question

当我导入Bootstrap CSS时，它会将额外的CSS添加到导航栏。如下图所示。我在这段代码中使用的是Bootstrap卡，但不是用于Navbar。当我删除Bootstrap CSS时，它工作正常。

​

​

您可以查看代码here

请帮我解决这个问题。

Answer 1

如果你的问题是下划线，你可以省略它，使用

style={{ textDecoration: 'none' }}

这是修改后的navbar.jsx文件

// eslint-disable-next-line
import React from 'react';
import { NavLink } from 'react-router-dom';

function Navbar(){
    return(
        <>
            <header className="l-header"> 
                <div className="navi bd-grid">
                    <div>
                        <NavLink to="#" className="navi__logo">Portfolio</NavLink>
                    </div>

                    <div className="navi__menu" id="navi-menu">
                        <ul className="navi__list">
                            <li className="navi__item">
                                <NavLink to="#home" className="navi__link menu" style={{ textDecoration: 'none' }}>Home</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#about" className="navi__link" style={{ textDecoration: 'none' }}>About</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#skills" className="navi__link" style={{ textDecoration: 'none' }}>Skills</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#work" className="navi__link" style={{ textDecoration: 'none' }}>Work</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#contact" className="navi__link" style={{ textDecoration: 'none' }}>Contact</NavLink>
                            </li>
                        </ul>
                    </div>

                    <div className="navi__toggle" id="navi-toggle">
                        <i className='bx bx-menu'></i>
                    </div>
                </div>
            </header>
        </>
    );
};

export default Navbar;

输出将如下所示

​

Answer 2

尝试导入index.js文件中的引导程序，应该可以解决问题。