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> 

这是一个扩展报头看起来像这样：

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

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

但原来

头应该占据整个宽度，但阵营版本挤压它，箭头图标，在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; 
} 

没有按” t呈现。这有什么问题？ 值得注意的是，当在检查员看。容器和行填充宽度，但按钮/标题不。

Answer 1

对于Content，您忘记了将一个class转换为className。

控制台应该有警告。