React Bootstrap中Form.Check组件单选按钮错位问题求助

问题分析 #

使用React Bootstrap的Form.Check组件实现支付方式单选选择时，出现单选按钮错位到最右侧的问题，核心原因是Col组件未正确嵌套在Row组件中，同时Form.Check的默认布局属性未适配需求。

解决方案 #

1. 修复栅格布局结构 #

Bootstrap栅格系统要求Col必须包裹在Row组件内部才能正常工作，否则会导致布局错乱。

2. 调整Form.Check的标签位置 #

通过labelPlacement="start"属性确保单选按钮显示在标签左侧，与标签对齐。

修正后的完整代码 #

<FormContainer>
  <CheckoutSteps step1 step2 step3></CheckoutSteps>
  <h1>Payment Method</h1>
  <Form onSubmit={submitHandler}>
    <Form.Group>
      <Form.Label as='legend'>Select Method</Form.Label>
    </Form.Group>
    {/* 用Row包裹Col，修复栅格布局 */}
    <Row>
      <Col>
        <Form.Check
          type='radio'
          label='PayPal or Credit Card'
          id='PayPal'
          name='paymentMethod'
          value='PayPal'
          onChange={(e) => setPaymentMethod(e.target.value)}
          labelPlacement="start" {/* 设置单选按钮在标签左侧 */}
        ></Form.Check>
        <Form.Check
          type='radio'
          label='Stripe'
          id='Stripe'
          name='paymentMethod'
          value='Stripe'
          onChange={(e) => setPaymentMethod(e.target.value)}
          labelPlacement="start" {/* 设置单选按钮在标签左侧 */}
        ></Form.Check>
      </Col>
    </Row>
    <br></br>
    <Button type='submit' variant='primary'>
      Continue
    </Button>
  </Form>
</FormContainer>

可选优化方案 #

若仍有布局问题，可将每个Form.Check单独包裹在Form.Group中，进一步增强布局稳定性：

<Row>
  <Col>
    <Form.Group>
      <Form.Check
        type='radio'
        label='PayPal or Credit Card'
        id='PayPal'
        name='paymentMethod'
        value='PayPal'
        onChange={(e) => setPaymentMethod(e.target.value)}
        labelPlacement="start"
      />
    </Form.Group>
    <Form.Group>
      <Form.Check
        type='radio'
        label='Stripe'
        id='Stripe'
        name='paymentMethod'
        value='Stripe'
        onChange={(e) => setPaymentMethod(e.target.value)}
        labelPlacement="start"
      />
    </Form.Group>
  </Col>
</Row>

内容的提问来源于stack exchange，提问作者Jeheu Dela Cruz