如何使用 antd diver 在 React 组件中分隔屏幕的两侧？

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

您可以将height分隔线设置为100%，请参阅此沙箱

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