即使导入，引导程序也不适用答案

【问题标题】：Bootstrap not applying even when imported即使导入，引导程序也不适用
【发布时间】：2021-12-29 21:23:52
【问题描述】：

我开始使用 react bootstrap 但是类名没有应用于我的 Confirmation.jsx 组件？我已经使用 yarn 安装了 bootstrap 和 react-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;

确认.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>
    )
}

【问题讨论】：

你在哪里安装了bootstrap（不是react-bootstrap）？来自 npm、CDN 或 HTML 中的 <script> 标记
我不确定？我如何检查

标签： reactjs bootstrap-4 react-bootstrap

【解决方案1】：

看起来您正在使用最新版本的引导程序，其中 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

【讨论】：