Bootstrap-Karten-Komponenten, die nicht in React rendern

Question

Ich verwende Bootstrap zum Stylen meiner Reactive-App. Das funktioniert die meiste Zeit sehr gut. Aus irgendeinem Grund kann ich Kartenkomponenten nicht richtig darstellen. Andere Bootstrap-Komponenten wie Navbar und Formulare funktionieren gut - es sind nur die Kartenkomponenten, die sich falsch verhalten.

Anders als beim Umbenennen von Klasse in Klassenname, ist alles andere für das Rendern von Karten erforderlich? Kompletter Code unten. Jeder Einblick sehr geschätzt!

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

Ich bin mit Bootstrap-Version 3 meteor add twbs:bootstrap, die nicht die Karte Komponente enthält. Danke Yang Shun