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

Posted 2023-03-21

【中文标题】即使导入，引导程序也不适用

【英文标题】：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> 标记

我不确定？我如何检查

【参考方案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