Bootstrap 即使导入也不适用

Question

我开始使用 React bootstrap，但是我的 Confirmation.jsx 组件中没有应用类名？我已经使用 yarn 安装了 bootstrap 和 react-bootstrap。我试过将 bootstrap 导入到我的 index.js 和我的 app.js 中——没有用，我也试过同时使用这两个

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

和

import 'bootstrap/dist/css/bootstrap.min.css';

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

App.js

import React from 'react';
import './App.css';
import { Container, Row, Col } from "react-bootstrap";
import { CoffeeCard } from './components/CoffeCard';
import { Confirmation } from './components/Confirmation';
import coffee from './data/coffee.json';

function App() {
  return (
      <>
          <Confirmation/>
          <Container>
              <Row>
              </Row>
          </Container>
      </>
  );
}

export default App;

Confirmation.jsx

import React from "react";
import { Toast } from 'react-bootstrap';

export function Confirmation({ toggle }) {
    return(
        <Toast onClose={() => toggle(false)}>
            <Toast.Header>
                <strong className="mr-auto">Added item to Basket</strong>
                <small>just now</small>
            </Toast.Header>
            <Toast.Body>
                That's a nice coffee you chose, want another?
            </Toast.Body>
        </Toast>
    )
}

Answer 1

看起来您正在使用最新版本的 bootstrap，其中 mr-auto 已更改为 me-auto (https://getbootstrap.com/docs/5.0/utilities/flex/#auto-margins)。如果您更改弹出窗口，它应该会按预期工作：

import React from "react";
import { Toast } from 'react-bootstrap';

export function Confirmation({ toggle }) {
    return(
        <Toast onClose={() => toggle(false)}>
            <Toast.Header>
                <strong className="me-auto">Added item to Basket</strong>
                <small>just now</small>
            </Toast.Header>
            <Toast.Body>
                That's a nice coffee you chose, want another?
            </Toast.Body>
        </Toast>
    )
}

工作 stackblitz 示例：https://stackblitz.com/edit/react-wjvcyu?file=src/index.js

Bootstrap 即使导入也不适用

Bootstrap not applying even when imported

reactjs

react-bootstrap

bootstrap-4