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

Posted 2023-02-22

【中文标题】容器、行、列 - 在 React-Bootstrap 中不起作用

【英文标题】：Container, Row, Col - in React-Bootstrap not working

【发布时间】：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...

codesandbox

显示的文本应该是HelloWorld，而不是它：

Hello
World

【问题讨论】：

目前尚不清楚您要在这里实现什么或预期的行为应该是什么。为什么Col 中有table？

我正在尝试将一块文本水平放置在表格旁边。

所以表格将在行的第一列，而一些数据在下一行。

你能在代码和类似的地方创建一个MCVE (Minimum, Complete and Verifiable Example)吗？

@Pineda 我用 MCVE 编辑了我的帖子。

【参考方案1】：

我已经解决了这个问题。这是我的失误。我错过了 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"
/>

`

【参考方案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>

【参考方案3】：

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

【参考方案4】：

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

在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"
/>

【讨论】：

哇！我犯了一个多么简单但愚蠢的错误！

不要忘记在此处获取此链接的最新版本：react-bootstrap.github.io/getting-started/introduction

另一个救命稻草

【参考方案5】：

您可以使用网格，然后指定要为表格提供的列数，以及要为其他 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>

【讨论】：

感谢您的意见。不幸的是，我使用的版本似乎不支持 Grid。我试图指定容器的列长度，但也没有用。

Grid 已重命名为 Container。检查react-bootstrap.netlify.com/migrating