React-Bootstrap CSS 問題

Question

當我導入 Bootstrap CSS 時，它會向導航欄添加額外的 CSS。 如下圖所示。 我在此代碼中使用引導卡，但不用於導航欄。 當我刪除 Bootstrap CSS 時它工作正常。

你可以在這里查看代碼

請幫我解決這個問題。

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 文件中導入引導程序，它應該可以解決問題。