Reactjs 如何使用 reactbootstrap 在表单中并排放置两个 Select

先将Select输入换行，然后换列，

<Row> 
  <Col lg={6} md={6} sm={12} xs={12}>
     // Your Select Input
  </Col>
</Row>

所以你的代码应该是这样的:

import './searchBar.scss'
import { Row, Col, Form, Button } from 'react-bootstrap'

const AppHeader = () => (
  <div>
    <Form role="form" className=" ">
      <Form.Group>
        <Row>
          <Col lg={6} md={6} sm={12} xs={12}>
            <Form.Label>Select Color : </Form.Label>
            <Form.Control as="select" custom>
              <option value="red">Red</option>
              <option value="blue">Blue</option>
              <option value="green">Green</option>
              <option value="black">Black</option>
              <option value="orange">Orange</option>
            </Form.Control>
            </Col>
            <Col lg={6} md={6} sm={12} xs={12}>
            <Form.Label>Select Color : </Form.Label>
            <Form.Control as="select" custom>
              <option value="red">Red</option>
              <option value="blue">Blue</option>
              <option value="green">Green</option>
              <option value="black">Black</option>
              <option value="orange">Orange</option>
            </Form.Control>
          </Col>
        </Row>
      </Form.Group>
      <Button type="submit">Submit form</Button>
    </Form>
  </div>
)
export default AppHeader

下面是一个类似方法的例子.试试大屏幕和小屏幕.