我有一个简单的结构化项目：html（带有 Bootstrap）css 和 js 文件。 我已经创建了 React.js 项目（通过 npm 中的 create-react-app）。我已经安装了 Bootstrap、JQuery 等。问题是当我将我的 html 文件翻译成 jsx 时，React 似乎忽略了样式（我在 React 中照常应用）。它忽略了网格。我有 3 行，其中一个左侧有一个元素，每行有两行，每行有 3 个元素（col-sm-4 col-md-4 col-lg4）。在我的旧项目（纯 html、css、js）中，它工作正常，但在这个 React 项目中，它的行为就像......它会在移动版本中（每一行中的一个元素低于另一个元素）。同时使用开发工具，我看到这些行和列仍然存在于浏览器代码中，但样式为空......你能告诉我发生了什么吗？我应该在哪里搜索这个问题的原因？
【问题讨论】：
标签： javascript html css reactjs twitter-bootstrap
如果您只是使用标准 React，则需要在 public/index.html 内的 <head></head> 标记中包含以下内容：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
如果您使用的是 Webpack 等构建器，请在您的 src/index.js 中运行 npm install bootstrap 和 include 依赖项。
假设所有这些都正确完成，设置 react 组件样式的正确方法如下：
直接给标签加样式：
<div style={{margin: '10px'}}>This is a div!</div>
使用 Bootstrap 类进行样式设置：
<button className="btn btn-primary">Click me!<button>
有用的链接：
https://getbootstrap.com/docs/4.1/getting-started/introduction/
https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
【讨论】：