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

IT技术 javascript html css reactjs react-bootstrap
2021-05-04 23:34:00

我目前正在尝试学习 React 和 React-Bootstrap。

我正在尝试充分利用 React-Bootstrap 网格布局。我不确定我是否错误地实施了它。我的直觉说我在某处使用了一个 impropver 版本，因为据我所知，“容器、列、行”功能根本不起作用。

可能是什么问题？我没主意了。

来自 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 的主要片段：

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
4个回答

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

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

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>

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

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

其它你可能感兴趣的问题
上一篇Ender 3 Pro 上奇怪的墙壁图案 下一篇有没有免费的扫描程序？