如何在带有 react-bootstrap 的表单中并排放置两个选择

Question

我正在学习 react-bootstrap 但我找到了 pb 。事实上，我正在制作一个响应式网站，并且我想要两个带有我的表单的设计（用于 sm 屏幕和 lg 屏幕）。我有一个有两个选择的表格。在 sm 模式下，我希望它们是一个在另一个之上（它已经有效）但在 lg 模式下我希望它们并排......我尝试使用 display flex 但它不起作用......有什么想法吗？非常感谢你

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

const AppHeader = () => (
  <div>
    <Form role="form" className=" ">
      <Form.Group>
        <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>
        <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>
      </Form.Group>
      <Button type="submit">Submit form</Button>
    </Form>
  </div>
);
export default AppHeader;

Answer 1

先将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

这里是 CodeSandBox 中的一个示例，采用了类似的方法。在大屏幕和小屏幕上尝试。

如何在带有 react-bootstrap 的表单中并排放置两个选择

How to fit two selects side by side in a form with react-bootstrap

reactjs

react-bootstrap