web-dev-qa-db-ja.com

コンテナ、行、列-React-Bootstrapで機能しない

私は現在、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": "[email protected]",

「react-bootstrap」ディレクトリのpackage.json：

  "_from": "react-bootstrap@^1.0.0-beta.6",
  "_id": "[email protected]",

私もbootstrap@3のインストールと使用を試みましたが、うまくいきませんでした。

npm install bootstrap@3 --savenpm 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です...

codesandbox

表示されるテキストはHelloWorldである必要がありますが、代わりに次のようになります。

Hello
World
javascripthtmlcssreactjsreact-bootstrap
2
Frank

私は問題を解決しました。それは私の側のミスステップでした。 スタイルシート に関して、react-bootstrapメインで説明されている設定の重要な部分を逃しました。

index.html最新のbootstrapスタイルシートへのパスをコピーして貼り付けます：

<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"
/>
8
Frank

グリッドを使用して、テーブルに指定する列の数と、12以外の他のものに保持する列の数を指定できます。
以下のコードのように。

グリッド、行、列のインポート

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>
3
Atul

Index.jsファイルにimport 'bootstrap/dist/css/bootstrap.min.css';を追加することもできます。必ずnpm install bootstrapにしてください。

1
johndhpark

反応ドキュメントによると、最初にbootstrap=をインストールする必要があります

npm install反応ブートストラップブートストラップ

次に、この行を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>
0
B1zzle