React和Bootstrap列不能一起使用

Question

我刚刚进入React，作为我的第一个项目，我想将Bootstrap项目转换为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>

这是一个扩展的标题，如下所示：

到目前为止我的React版本看起来像

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'));

但事实证明

标题应该占据整个宽度，但是React版本正在挤压它，而在CSS中创建的箭头图标包含：

.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;
}

不会渲染。这有什么问题？ 值得注意的是，在查看检查员时。容器和行填充宽度，但按钮/标题不填充。

Answer 1

您忘了将一个class转换为className Content。

您的控制台应该有警告。