css - React-Bootstrap 的 Select 元素验证未对齐

Question

我正在使用 React-Bootstrap(注意:我们使用的是相对较新的 v1.0.0!)

我可以很好地向我的表单添加验证，但它不能很好地与选择下拉列表一起使用:

我该如何解决这个问题？是确定将什么手动 css 分层到控件上以重新定位验证图标的唯一选择吗？

代码:

  <Form validated>
    <Form.Group>
      <Form.Label>Text Input</Form.Label>
      <Form.Control required type="text" value="foo"/>
    </Form.Group>
    <Form.Group>
      <Form.Label>Invalid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={''}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
    <Form.Group>
      <Form.Label>Valid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={'2'}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
  </Form>

Answer 1

或者，您可以将自定义 attr 添加到Form.Control

请在下面找到代码片段以供引用

注意 中的 custom 属性>

<Form.Control required as="select" custom>
   <option value="">...</option>
</Form.Control>