Javascript 避免元素在浏览器上单独移动，以反应形式调整大小

在React中，我正在努力完成以下表单：

import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import { Container, Row, Col, InputGroup, Button, FormControl, Form } from 'react-bootstrap';

const images = [
    {
        original: '/assets/images/products/colgantes.png',
        thumbnail: '/assets/images/products/colgantes@0.25x.png',
    },
    {
        original: '/assets/images/products/corazones.png',
        thumbnail: '/assets/images/products/corazones@0.25x.png',
    },
    {
        original: '/assets/images/products/take-me-to-the-beach.png',
        thumbnail: '/assets/images/products/take-me-to-the-beach@0.25x.png',
    },
];


class DetailedProduct extends Component {

    render() {

        return (
            <>
                <Container fluid>
                    <Row >
                        <Col md={{ span: 4, offset: 3 }} sm={{ span: 12, offset: 0}} >
                            <ImageGallery
                                    items={images}
                                    showNav=""
                                    showFullscreenButton=""
                                    showBullets=""
                                    showPlayButton=""
                                    thumbnailPosition="left"
                            />
                        </Col>
                        <Col md={3} sm={12} className="text-xs-center text-md-left" >
                            <h1>Product</h1>
                            <h3>$500</h3>
                            <p>Lorem Ipsum is simply dummy text from the printing and typeseting industrys</p>

                            <Form>
                                <Row >
                                    <Col sm={12} md={8} >
                                        <Form.Group controlId="color" >
                                            <Form.Label>Color</Form.Label>
                                            <Form.Control as="select" custom>
                                                <option>Rojo</option>
                                                <option>Negro</option>
                                                <option>Azul</option>
                                            </Form.Control>
                                        </Form.Group>
                                    </Col>

                                    <Col sm={12} md={4} className="inline-block">
                                        <Form.Group controlId="cantidad" >
                                            <Form.Label>Cantidad</Form.Label>
                                            <InputGroup >
                                                <InputGroup.Prepend>
                                                    <Button variant="outline-secondary"  >+</Button>
                                                </InputGroup.Prepend>
                                                <FormControl
                                                    placeholder="1"
                                                    aria-label="quantity"
                                                    aria-describedby="basic-addon2"

                                                />
                                                <InputGroup.Append>
                                                    <Button variant="outline-secondary" >-</Button>
                                                </InputGroup.Append>
                                            </InputGroup>
                                        </Form.Group>
                                    </Col>
                                </Row>

                            </Form>

                        </Col>
                    </Row>
                </Container>

            </>
        );
    }
}


export default DetailedProduct;

import React，{Component}来自'React'；
从“react image gallery”导入ImageGallery；
从“react bootstrap”导入{容器、行、列、InputGroup、按钮、窗体控件、窗体}；
常量图像=[
{
原件：“/assets/images/products/colgantes.png”，
缩略图：'/assets/images/products/colgantes@0.25x.png',
},
{
原件：'/assets/images/products/corazones.png'，
缩略图：'/assets/images/products/corazones@0.25x.png',
},
{
原文：“/assets/images/products/take me to beach.png”，
缩略图：'/assets/images/products/带我到-beach@0.25x.png',
},
];
类DetailedProduct扩展组件{
render（）{
返回(
产品
$500
Lorem Ipsum只是印刷和排版行业的虚拟文本

颜色
罗霍
黑人
蓝色
康蒂达
+
-
);
}
}
导出默认的详细产品；

我遇到的问题是，当我调整浏览器窗口的大小时，输入中附加的按钮开始分别向下移动到另一行，打破了[+1-]块。我曾尝试将不同的CSS应用于表单组，但我找不到一种方法将它们紧密地结合在一起，这样，如果它们移动，它们就会在块中移动，并且不会发生以下情况：

---

您可以尝试添加最小尺寸的规则：

min-width: 150px;

150px是一个示例大小。 不幸的是，我不知道输入的宽度大小

---

对于包含这三个元素的类，在这种情况下为input group。我建议您添加一个类并对其应用其他样式。

谢谢，我能够通过为scren分辨率使用正确的flex列大小来修复它，sm={12}md={6}lg={4}-这就成功了