css - Bootstrap Card 组件未在 React 中呈现

Question

我正在使用 Bootstrap 来设计我的 React 应用程序。这在大多数时候都很好用。但是由于某种原因，我无法正确呈现 Card 组件。其他 Bootstrap 组件(如 Navbar 和表单)运行良好 - 只是卡片组件行为不当。

除了将class重命名为className之外，渲染卡片还需要什么吗？完整代码如下。非常感谢任何见解!

import React from 'react'
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
export default class CardCollectionWrapper extends TrackerReact(React.Component) {


    constructor() {
    super();

    this.state = {
    }
    }

    componentWillMount() {
    }

    componentWillUnmount() {
    }

    loadMore() {
    }

    sortBy(){
    }

    render() {
    return(
      <div className="card-deck-wrapper">
      <div className ="container">
        <div className="card-deck">
          <div className="card">
            <img className="card-img-top" src="/images/wire240.jpeg" alt="Card image cap"/>
            <div className="card-block">
              <h4 className="card-title">Card title</h4>
              <p className="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div className="card">
            <img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/>
            <div className="card-block">
              <h4 className="card-title">Card title</h4>
              <p className="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div className="card">
            <img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/>
            <div className="card-block">
              <h4 className="card-title">Card title</h4>
              <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
              <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    )}}

Answer 1

我正在使用 Bootstrap 版本 3 meteor add twbs:bootstrap，它不包含卡片组件。感谢杨顺