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。

控制檯應該有警告。