使用react bootstrap在台式机中一行显示4张卡，在平板电脑版本中一行显示2张卡

使用react bootstrap可以很方便地在不同设备上显示不同数量的卡片。为了在台式机中一行显示4张卡，在平板电脑版本中一行显示2张卡，我们可以使用Grid系统来实现。

首先，我们需要安装react-bootstrap模块，可以通过npm命令来安装：

npm install react-bootstrap

然后，在React组件中引入所需的模块：

import React from 'react';
import { Container, Row, Col, Card } from 'react-bootstrap';

接下来，在组件的render方法中，使用Container、Row和Col来布局卡片：

class MyComponent extends React.Component {
  render() {
    return (
      <Container>
        <Row>
          <Col md={3} sm={6}>
            <Card>Card 1</Card>
          </Col>
          <Col md={3} sm={6}>
            <Card>Card 2</Card>
          </Col>
          <Col md={3} sm={6}>
            <Card>Card 3</Card>
          </Col>
          <Col md={3} sm={6}>
            <Card>Card 4</Card>
          </Col>
        </Row>
      </Container>
    );
  }
}

在上面的代码中，我们使用Col组件来指定每个卡片所占据的列数。通过设置md和sm属性，我们可以控制在不同设备上显示的列数。在台式机上，每个Col占据3个列（12列中的1/4），在平板电脑上，每个Col占据6个列（12列中的1/2）。

最后，在需要显示这些卡片的地方，使用<MyComponent />来渲染组件即可。

这种布局方式可以在不同设备上自动适应，并根据屏幕大小调整每行显示的卡片数量。同时，React Bootstrap提供了丰富的组件和样式，可以轻松创建出漂亮的响应式页面。

如果你使用腾讯云，推荐使用腾讯云的云服务器CVM来部署React应用。你可以在腾讯云官网上了解更多关于云服务器的信息：腾讯云云服务器。