将React-Bootstrap xs，sm，md，lg，xl跨度/偏移量保存到CSS类中

问题描述

我们有以下<Row>和2个<Col>元素：

<Row>
    <Col xs={12} sm={{ span: 9,offset: 1 }} md={{ span: 6,offset: 0 }} lg={5} xl={4}>
        <h3 className='graph-header-1'>First Header</h3>
        <div>Graph that fills the col-width goes here</div>
    </Col>
    <Col xs={12} sm={{ span: 9,offset: 0 }} lg={{ span: 5,offset: 1 }} xl={{ span: 4,offset: 2 }}>
        <h3 className='graph-header-1'></h3>
        <div>2nd Graph that fills the column's width goes here</div>
    </Col>
</Row>

此布局（行数为2列，具有xs，sm，md，lg，xl中的每一个的这些特定跨距/偏移）将在我们的应用程序中的几个地方使用。是否可以将其保存在一个类中，这样，我们无需反复设置这些值，只需使用：

<Row className='our-responsive-layout'>
    <Col>
        <h3 className='graph-header-1'>First Header</h3>
        <div>Graph that fills the col-width goes here</div>
    </Col>
    <Col>
        <h3 className='graph-header-1'></h3>
        <div>2nd Graph that fills the column's width goes here</div>
    </Col>
</Row>

...其中our-responsive-layout是一个处理2列的跨度/偏移量的类吗？另外，为每列设置一个类（而不是为两列的行设置一个类）也将有所帮助。

编辑：如果在使用react-bootstrap及其容器/行/列组件的复杂的react-app中，有关处理响应性的任何详尽指南，请分享。我担心在整个应用程序中添加诸如xs={12} sm={{ span: 9,offset: 2 }}之类的代码会使代码更加混乱。

谢谢！

解决方法

为什么不为此简单地创建一个组件？ like that (demo)的东西：

import React,{ Component } from "react";
import { render } from "react-dom";

const App = () => {
  return (
    <MyRow>
      <MyCol>Here is your col 1</MyCol>
      <MyCol>Here is your col 2</MyCol>
    </MyRow>
  );
};

const MyRow = ({children}) => {
  return <div className='this is your row'>{children}</div>
}

const MyCol = ({children}) => {
  return <div className='this is your col'>{children}</div>;
}

render(<App />,document.getElementById("root"));

在这里，只需用行和col组件替换div和MyRow中的MyCol标签（当然还有className），就足够了。

例如，如果您想在col上添加或更改类，则只需添加一个道具即可。