容器、行、列 - 在 React-Bootstrap 中不起作用 [英] Container, Row, Col - in React-Bootstrap not working

问题描述

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

I'm currently attempting to learn React, and React-Bootstrap.

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

I'm attempting to make good use of the React-Bootstrap grid layout. I'm not sure if I'm implementing it incorrectly. My gut says I'm using an impropver version somewhere because as far as I can tell the "Container, Col, Row" functionality isn't working at all.

可能是什么问题?我没有想法了.

What could be the issue? I'm out of ideas.

来自 package.json 的版本:

Versions from 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:

The package.json from "bootstrap" dir:

  "_from": "bootstrap@latest",
  "_id": "bootstrap@4.3.1",

来自react-bootstrap"目录的 package.json:

The package.json from "react-bootstrap" dir:

  "_from": "react-bootstrap@^1.0.0-beta.6",
  "_id": "react-bootstrap@1.0.0-beta.6",

请注意，我也尝试过安装和使用 bootstrap@3，但没有成功:

Please note that I've also tried installing and using bootstrap@3 with no luck:

npm install bootstrap@3 --savenpm i --save bootstrap@3

来自 index.js 的主要片段:

Major snippet from 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...

Here is an MCVE...

codesandbox

显示的文本应该是 HelloWorld 而是它的:

The displayed text should be HelloWorld but instead its:

Hello
World

推荐答案

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

I've resolved the issue. It was a miss-step on my part. I missed a crucial part of the set up outlined on the react-bootstrap main regarding style sheets.

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

In index.html copy and paste the path to the latest bootstrap style sheets:

<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 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！