在Jsfiddle的示例React应用程序中,Bootstrap表未正确显示。是的,我在JSX中使用的是className而不是class。请提出代码中的错误。
链接到代码:https : //jsfiddle.net/hgondela/teag0sqf/5/
var HelloTable = React.createClass({
render: function() {
return (
<div>
<div className='jumbotron text-center'>Bootstrap table in React JSX </div>
<table className="table table-striped table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
)
}
})
ReactDOM.render(<HelloTable name="World" />, document.getElementById('container'));
我用浏览器检查了jsfiddle中的元素,发现浏览器会自动<tbody>
在表中插入一个元素,该元素将引导程序用于样式的包装。所以我加了<tbody>
:
<table>
<tbody>
// table stuff
</tbody>
</table>
现在表格看起来很棒:https : //jsfiddle.net/teag0sqf/6/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句