引导程序在我的 create-react-app 中不起作用答案

【问题标题】：bootstrap not working within my create-react-app引导程序在我的 create-react-app 中不起作用
【发布时间】：2018-06-18 02:01:02
【问题描述】：

我正在尝试使用传统的引导程序而不是 react-bootstrap 来渲染我的 React 组件。我不确定我在这里做错了什么。我已经通过 npm 安装了引导程序，并使用了 cdn 链接以及脚本。我觉得我已经在这里尝试了所有东西，但我的组件无法按我想要的方式加载。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

这是我的组件代码：

import React, {Component} from "react";
export default class Home extends Component {
      render() {
      var cardStyle = {
        width: "20 rem"
      };
      return(
        <div className ="card" style = {cardStyle}>
            <img className="card-img-top" src="..." alt=""></img>
            <div className="card-block">
            <h4 className="card-title">Card title</h4>
            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" className="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        );      
      }
    }

我的卡片组件不会显示。相反，我得到： as you see not how a typical bootstrap card component would look like

谁能告诉我我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs npm bootstrap-4

【解决方案1】：

您的样式表链接到 bootstrap 3.3.6，但您正在使用 card 和 bootstrap 4

尝试更改您的 css 链接

来自

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

到

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

【讨论】：

谢谢！该卡已经开始工作，尽管它的宽度仍然存在一些问题。它占据了整个屏幕的宽度。不过，现在更大的问题是，添加此语句会弄乱我使用 react-bootstrap 的其他组件。你知道为什么会这样吗？
它的宽度有问题，因为width: "20 rem" 有更多空间更改为width: "20rem" 它应该可以工作:)
成功了！哈哈菜鸟的错误。最后，你知道为什么我的 react-bootstrap 组件在我更改了我的 css 链接后变得疯狂了吗？非常感谢！

【解决方案2】：

确保执行 webpack 以反映更改，检查浏览器开发人员工具中加载的所有必需资源。我建议使用我觉得非常有用的 react 开发者工具插件 chrome。

【讨论】：

是的，已经在使用它了。显示所有已加载的内容，没有问题。使用 react-bootstrap 的组件，一切都完美加载。尝试使用传统引导程序时会出现此问题

【解决方案3】：

如果您是通过npm 安装的，您可以通过import 引导到您的项目中，如下所示

import 'bootstrap/dist/css/bootstrap.css'

或安装引导程序的任何位置。

将导入放在您的 index.js 文件中。

【讨论】：