我刚开始接触 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;
}
不渲染。这有什么问题? 值得注意的是,在查看检查器时。容器和行填充宽度,但按钮/标题不填充。
最佳答案
您忘记将 Content
的 class
转换为 className
。
您的控制台中应该有一个警告。
关于html - React 和 Bootstrap 列不能一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23616319/