React 和 Bootstrap 列不能一起工作答案

【问题标题】：React and Bootstrap columns are not working togetherReact 和 Bootstrap 列不能一起工作
【发布时间】：2014-06-30 05:53:55
【问题描述】：

我刚刚进入 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;
}

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

【问题讨论】：

标签： html css twitter-bootstrap reactjs

【解决方案1】：

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

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

【讨论】：