html - 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

您忘记将 Content 的 class 转换为 className。

您的控制台中应该有一个警告。