【发布时间】：2019-08-12 19:16:25
【问题描述】：
我目前正在尝试学习 React 和 React-Bootstrap。
我正在尝试充分利用 React-Bootstrap 网格布局。我不确定我是否执行不正确。我的直觉说我在某处使用了一个不恰当的版本，因为据我所知，“容器、列、行”功能根本不起作用。
可能是什么问题？我没有想法。
来自 package.json 的版本：
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.0.0",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"typescript": "^3.3.4000"
“bootstrap”目录中的 package.json：
"_from": "bootstrap@latest",
"_id": "bootstrap@4.3.1",
来自“react-bootstrap”目录的 package.json：
"_from": "react-bootstrap@^1.0.0-beta.6",
"_id": "react-bootstrap@1.0.0-beta.6",
请注意，我也尝试安装和使用bootstrap@3，但没有成功：
npm install bootstrap@3 --save
npm i --save bootstrap@3
来自 index.js 的主要 sn-p：
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
class Module extends React.Component
{
constructor(props)
{
super(props);
}
clickHandler = (command) =>
{
// ... some handler code here
}
render()
{
return (
<Container>
<Row>
<Col>
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td> // some more button stuff here
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
</table>
</Col>
<Col>
// another table here... should be aligned next to the
// prev "col" horizontally but is going underneath (vertically)
</Col>
</Row>
</Container>
);
}
}
* 更新 *
这是一个 MCVE...
显示的文本应该是HelloWorld，而不是它：
Hello
World
【问题讨论】：
-
目前尚不清楚您要在这里实现什么或预期的行为应该是什么。为什么
Col中有table？ -
我正在尝试将一块文本水平放置在表格旁边。
-
所以表格将在行的第一列，而一些数据在下一行。
-
你能在代码和类似的地方创建一个MCVE (Minimum, Complete and Verifiable Example)吗？
-
@Pineda 我用 MCVE 编辑了我的帖子。
标签： javascript html css reactjs react-bootstrap