Bootstrap在我的reactjs项目中无法正常工作

Question

首先，我真的是Reactjs的新手。我正在尝试使用引导程序设计我的React项目。由于某些原因，它无法正常运行。下面是我的代码：

App.js

import React from 'react';
import './App.css';
import Menu from '../components/Menu/Menu';

function App() {
  return (
    <div className="App">
      <Menu />
    </div>
  );
}

export default App;

Menu.js

import React from 'react'
import * as ReactBootstrap from 'react-bootstrap'

const Menu = () => {
    return (
        <div id="menu_container">
            <ReactBootstrap.Navbar bg="dark" variant="dark">
                <ReactBootstrap.Navbar.Brand href="#home">Navbar</ReactBootstrap.Navbar.Brand>
                <ReactBootstrap.Nav className="mr-auto">
                    <ReactBootstrap.Nav.Link href="#home">Home</ReactBootstrap.Nav.Link>
                    <ReactBootstrap.Nav.Link href="#features">Features</ReactBootstrap.Nav.Link>
                    <ReactBootstrap.Nav.Link href="#pricing">Pricing</ReactBootstrap.Nav.Link>
                </ReactBootstrap.Nav>
                <ReactBootstrap.Form inline>
                    <ReactBootstrap.FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <ReactBootstrap.Button variant="outline-light">Search</ReactBootstrap.Button>
                </ReactBootstrap.Form>
            </ReactBootstrap.Navbar>
        </div>
    )
}

export default Menu;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

当前输出：

Current output

我想要的输出：

Output I want

Answer 1

[您有一些.css文件是在App.js和index.js中导入的。也许他们超越了一些引导规则。

我在https://codesandbox.io/s/test-react-bootstrap-75rsd处获取了您的代码，删除了App.css和index.css导入，看起来像您想要的。