Bootstrap卡組件不在React中渲染

我使用bootstrap來設計我的反應應用程序。這在大部分時間都很有效。但由於某些原因，我無法正確渲染卡組件。其他引導組件，如Navbar和表單工作得很好 - 只是卡組件行爲不當。Bootstrap卡組件不在React中渲染

除了將類重命名爲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> 
    )}}

來源

2016-09-25 ElJefeJames

你加載Bootstrap 3或4嗎？卡僅在Bootstrap 4中可用。 –

釘牢它！我使用的氣氛twbs包 - 這似乎是bootstrap 3.謝謝 – ElJefeJames

我使用的Bootstrap版本3 meteor add twbs:bootstrap，它不包含卡組件。謝謝楊順

來源

2016-09-25 09:39:39 ElJefeJames

Bootstrap卡組件不在React中渲染

回答

相關問題