React Ant: как создать левый правый макет

Question

Пытаясь научиться использовать antd framework, я хочу создать левый-правый макет, меньший по сравнению с показанным

как я могу сделай это? как я могу сохранить первый столбец фиксированным (не двигается)!?

Answer 1

Использовать antd layout Компонент для создания макетов. Ссылка на кодовый ящик - https://codesandbox.io/s/antd-layout-itvu6

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Sider>Sider</Sider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
,
  document.getElementById('container'),
);

Вы можете просмотреть документы здесь - https://ant.design/components/layout/

Answer 2

Используйте строки следующим образом:

<Row type="flex">
  <Col>Left Column</Col>
  <Col style={{flex: 1}}>Right Column</Col>
</Row>