反應引導表未對齊

Question

我的桌子不會對齊，有人可以幫忙嗎？

我的想法是我在某處丟失了 .css 文件，但我不確定。

看起來名稱越長，列被推越越多。

我使用 npm install react-bootstrap 來獲取我的依賴項，除非我遺漏了一些明顯的東西？

我已經參考了 react-bootstrap 文檔並在我的 App.js 文件中導入了以下內容，但這仍然拒絕玩球。 任何進一步的幫助將不勝感激。

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

員工.jsx

import React, { Component } from "react";

import { Button, Table, Modal, Form } from "react-bootstrap";

class Employees extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
  }

  handleModal() {
    this.setState({ show: true });
  }

  getTime() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return time;
  }

  render() {
    return (
      <React.Fragment>
        <Table bordered responsive>
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">In</th>
              <th scope="col">Out</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{this.props.number}</td>
              <td>{this.props.name}</td>
              <td>
                <Button
                  onClick={() => {
                    this.handleModal();
                  }}
                >
                  Sign-in
                </Button>
              </td>
              <td>
                <Button>Sign-out</Button>
              </td>
            </tr>
          </tbody>
        </Table>
        <Modal show={this.state.show}>
          <Modal.Header>Sign In</Modal.Header>
          <Modal.Body>
            <Form>
              <Form.Group controlId="formBasicEmail">
                <Form.Label>User</Form.Label>
                <Form.Control type="text" placeholder="Enter username" />
              </Form.Group>
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button>Confirm Sign-In</Button>
          </Modal.Footer>
        </Modal>
      </React.Fragment>
    );
  }
}

export default Employees;

Answer 1

您正在為每一行創建一個新表，在Employees 組件中有一個表，然后為每一行創建一個子組件。

表類

class Table extends React.Component {
    constructor() {
        super();
        this.state = {
            people: [
                {
                    name: 'Archie',
                    number: 1
                },
                {
                    name: 'Someone else',
                    number: 3
                }
            ]
        };
    }

    render() {

        const rows = this.state.people.map(person => {
            return (
                <Row person={person}/>
            )
        });

        return (
            <React.Fragment>
                <Table bordered responsive>
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">In</th>
                        <th scope="col">Out</th>
                    </tr>
                    </thead>
                    <tbody>
                    {rows}
                    </tbody>
                </Table>
            </React.Fragment>
        );
    }
}

行類

class Row extends React.Component {
    constructor() {
        super();
        this.state = {
            show: false
        };
    }

    handleModal() {
        this.setState({ show: true });
    }

    render() {
        return (
            <React.Fragment>
                <tr>
                    <td >{this.props.person.number}</td>
                    <td>{this.props.person.name}</td>
                    <td>
                        <Button
                            onClick={() => {
                                this.handleModal();
                            }}
                        >
                            Sign-in
                        </Button>
                    </td>
                    <td>
                        <Button>Sign-out</Button>
                    </td>
                </tr>
                <Modal show={this.state.show}>
                    <Modal.Header>Sign In</Modal.Header>
                    <Modal.Body>
                        <Form>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>User</Form.Label>
                                <Form.Control type="text" placeholder="Enter username" />
                            </Form.Group>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button>Confirm Sign-In</Button>
                    </Modal.Footer>
                </Modal>
            </React.Fragment>
        );
    }
}