Question

我的目标是使用 React Bootstrap 创建一个表。首先，我使用了以下 example。

现在我遇到了以下问题：表格的标题行不是在所有内容之上，而是突然出现在正文的左侧。我完全按照示例中的代码使用，因此不知道为什么会发生这种情况。

我使用 react-bootstrap 版本：1.5.2 并在类 index.js 中导入 CSS，像这样 import 'bootstrap/dist/css/bootstrap.min.css';。

这是我从页面复制的代码，并以 1:1 的比例插入到我的代码中。

                <Table striped bordered hover>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td colSpan="2">Larry the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </Table>

我该如何解决这个问题？问题出在哪里？

Answer 1

你导入过表格吗？

import Table from 'react-bootstrap/Table'

查看文档底部以了解更多信息： https://react-bootstrap.netlify.app/components/table/#table-api

React Bootstrap 表无法正确显示

1 个答案: