"容器、行、列 - 在 React-Bootstrap 中不起作用"

Question

我目前正在尝试学习 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"

Answer 1

我已经解决了这个问题。 这是我的失误。 我错过了关于样式表的 react-bootstrap main 中概述的设置的一个关键部分。

在index.html复制并粘贴最新引导样式表的路径：

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Answer 2

根据反应文档，您必须先安装引导程序

npm 安装 react-bootstrap 引导程序

那么你必须在你的 index.js 或 App.js 中导入这一行

import 'bootstrap/dist/css/bootstrap.min.css';

然后你可以在你的组件中像这样import { Container, Row, Col } from 'react-bootstrap'; 并像这样使用

 <Container>
                <Row>
                    <Col>1</Col>
                    <Col>2</Col>
                    <Col>3</Col>
                </Row>
            </Container>

Answer 3

您可以使用网格，然后指定要为表提供的列数以及要为 12 中的其他内容保留的列数。
就像下面的代码。

导入 Grid、Row 和 cols 之类的

import { Row, Col, Grid } from 'react-bootstrap';



<Grid>
                    <Row>
                        <Col md="6">
                            <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 md="6">
                            {"dsfdsdsf"}
                        </Col>
                    </Row>
                </Grid>

Answer 4

您还可以添加import 'bootstrap/dist/css/bootstrap.min.css'; 在 index.js 文件中。 确保npm install bootstrap 。

Answer 5

我已经解决了这个问题。 这是我的失误。 我错过了关于样式表的 react-bootstrap main 设置中的一个关键部分。

在 index.html 中复制并粘贴最新引导样式表的路径：`

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

`

Answer 6

我面临着同样的问题。 我搜索了很多然后我解决了我的问题。

我假设您已经安装了react-bootstrap bootstrap<\/code>库。

通过npm instll react-bootstrap bootstrap<\/code> 。 所以下一步是在index.js<\/code>或app.js<\/code>中添加 Bootstrap 文件。 就我而言，我添加了import 'bootstrap\/dist\/css\/bootstrap.min.css';<\/code> 在index.js<\/code>中。

现在是时候导入我正在使用的组件<\/strong>了。 我在App.js<\/code>中使用组件

import { Image ,Button  ,Row ,Col } from "react-bootstrap";