Question

我正在尝试使用传统的bootstrap而不是react-bootstrap来渲染我的React组件。我不确定我在这里做错了什么。我已经通过npm安装了bootstrap，也使用了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

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

Answer 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">

Answer 2

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

Answer 3

如果您是通过import安装的，可以import 'bootstrap/dist/css/bootstrap.css'按照以下方式引导到您的项目中

tf.contrib.layers.batch_norm

或安装bootstrap的地方。

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

bootstrap在我的create-react-app中无法正常工作

3 个答案: