javascript - react组件中如何使用antd divider分隔屏幕的两侧？

Question

我正在使用 antd 并希望垂直分隔线将屏幕的两侧分开。两侧实际上由不同的 Col 组件分隔。它们目前看起来像这样:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col span={2}>
          <Divider type='vertical'/>
        </Col>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }

这里的问题是分隔线几乎没有出现。我希望它一直到内容结束的地方。相反，它只是一条很小的线。

这是它当前的截图:

你几乎看不到中间的分隔线。

如何使垂直分隔线与内容一样长？

谢谢!

Answer 1

您可以将分隔线的高度设置为100%，参见this sandbox

    <Divider type="vertical" style={{ height: "100%" }} />