ant.design输入组的宽度为Col的100％，而无需断开线

Question

我有一个带有Input.Group和Select的ant.design Button。
我想将它们制成Col（任意大小）的100％。
以下代码打破了Select和Button之间的界限 https://codesandbox.io/s/peaceful-bogdan-2z8ot

   <Row>
    <Col span={6}>
      <Form.Item label="Label">
        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "100%" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>
      </Form.Item>
    </Col>
  </Row>

我需要一个适合任何Col宽度/跨度的解决方案。

谢谢

再次链接：https://codesandbox.io/s/peaceful-bogdan-2z8ot

Answer 1

我不确定这将如何影响您的其他布局，但是如果您对内联CSS满意，请尝试以InputGroup的样式添加 whiteSpace：'nowrap'。

        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "calc(100% - 32px)" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>