时间戳

首页 > 解决方案 > Bootstrap 在我的 reactjs 项目中无法正常工作

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

问题描述

首先，我是 reactjs 的新手。我正在尝试使用引导程序设计我的反应项目。由于某些原因，它没有按应有的方式工作。下面是我的代码：

应用程序.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;

菜单.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;

索引.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();

电流输出：

电流输出

我想要的输出：

我想要的输出

标签： reactjsjsx

解决方案

您有一些在 App.js 和 index.js 中导入的 .css 文件。也许他们正在覆盖一些引导规则。

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

推荐阅读