代码之家 › 专栏 › 技术社区 › tesicg

下一个react引导表上没有边框

react-bootstrap-table reactjs

1

tesicg · 技术社区 · 6 年前

接下来我使用react bootstrap表:

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;

但是,没有边界。

我错过了什么?

4 回复 | 直到 6 年前

1

2

AllenFang 6 年前

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

显然,您缺少添加引导css,或者在添加引导css时出现问题。

艾伦

2

1

Zip184 5 年前

我也有同样的问题。它需要像其他提到的引导css。在一个典型的react应用程序中,您需要安装 bootstrap 通过npm,然后用这一行导入引导css。

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

3

0

Krina Soni 6 年前

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;

试试这个。

4

0

jedd 5 年前

bootstrap引用需要添加到index.html中,如下所示:

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