Html React列和引导列不能一起工作

我只是跳进了React，作为我的第一个项目，我想把一个引导项目转换成React和Bootstrap

我所拥有的是：

       <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <div class="row">
                        <div class="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
                            <h4> Header </h4>
                        </div>
                    </div>
                    <div class="row">
                        <div id="collapseTwo">
                            <span>
                                Content
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

不渲染。这有什么问题？

---

值得一提的是，在检查时。容器和行填充宽度，但按钮/标题不填充宽度。

您忘记将

内容的
类
转换为
类名

控制台中应该有一个警告。
您忘了将
内容的
类
转换为
类名

控制台中应该有一个警告

var Campaign_Setup = React.createClass({
      render: function() {
        // transferPropsTo() is smart enough to merge classes provided
        // to this component.
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-8 col-xs-12">
                        <div className="row">
                            <div className="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
                                <h4> Header</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div id="collapseTwo">
                                <span> Content </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
      }
    });

React.renderComponent(<Campaign_Setup />, document.getElementById('Campaign_Settings'));

.heading_button:before {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: #999999;         /* adjust as needed */
    margin-top: 10px;
}