我在 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

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 }
        striped
        hover
        condensed
     />
    );
  }
}

export default App;

试试这个。

Answer 2

我是react的创造者-bootstrap-table,请查收https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html.

显然，您缺少添加 bootstrap css 或添加 bootstrap css.

时出现问题

艾伦

Answer 3

需要将 bootstrap 引用添加到 index.html，如下所示：

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Answer 4

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

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

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

I don't have border on react-bootstrap-table-next

reactjs

react-bootstrap-table