进口"bootstrap/dist/css/bootstrap.min.css" ;不工作

Question

所以基本上我有一个react应用程序，我正在创建，在它里面我有一个页面，我使用react-bootstrap库来创建某些组件。

这里我有一个react注册表单与引导组件，我已经安装了所有的库和这段代码工作得很好，但问题在于，当我运行页面的样式不显示，即使我已经导入:

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

所以如果有任何方法可以解决这个问题，请告诉我。

谢谢!

下面是react页面的代码:

import React from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import "bootstrap/dist/css/bootstrap.min.css";

const UploadBussiness = () => {
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
)
}
export default UploadBussiness

Answer 1

可能还有其他问题，但根据react-bootstrap文档，也许可以尝试在App.js中包含此导入，而不是组件文件:

下面这行可以包含在你的src/index.js或App.js文件中:

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

Answer 2

我发现新的React Docs (Beta)比旧的React Docs更具可读性和帮助。来自新的React文档(测试版):

React没有规定如何添加CSS文件。在最简单的情况下，你将添加一个<link>标签到你的HTML。如果您使用构建工具或框架，请查阅其文档以了解如何将CSS文件添加到项目中。

所以John Li在他的回答中所说的是正确的;他直接引用了React Bootstrap文档。但是，你也可以尝试直接将CSS添加到HTML中，React Bootstrap文档也建议:

如何以及包含哪些Bootstrap样式取决于您，但是最简单的方法是包含来自CDN的最新样式。关于使用CDN的好处的更多信息可以在这里找到。

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>

如果这有效，那么您也将有一个版本的Bootstrap指定，这可能对您以后有帮助。

编辑:我忘了强调，正如React文档(测试版)建议的那样，你应该查阅你正在使用的任何构建工具(例如Vite)或框架(例如Create React App)的文档。如果你没有使用构建工具或框架，你就只能靠自己了。