我的react-bootstrap-table-next 上没有边框

Question

我以这种方式使用react-bootstrap-table-next：

import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}];

class App extends Component {
  render() {
    return (
      <BootstrapTable keyField='id' data={ products } columns={ columns } />
    );
  }
}

export default App;

但是，没有边界。

我缺少什么？

Answer 1

我有完全相同的问题。就像其他人提到的那样，它需要引导 CSS。在典型的 React 应用程序中，您需要bootstrap通过 npm 安装，然后使用此行导入引导 CSS。

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

Answer 2

我是react-bootstrap-table的创建者，请检查https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html。

显然，您缺少添加 bootstrap css 或者添加 bootstrap css 时出现一些问题。

艾伦