Избегайте перемещения элементов по отдельности при изменении размера браузера в форме ответа

Question

Я борюсь со следующей формой, выполненной в 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;

Проблема, с которой я столкнулся, заключается в том, что при изменении размера окна браузера добавленные кнопки на входе начинают двигаться вниз к отдельно разные строки, ломая блок [+ 1 -]. Я пытался применить различные CSS к группе форм, но я не могу найти способ их объединить, чтобы, если они перемещаются, они перемещались в блоке и не происходило следующее:

Answer 1

Спасибо, я смог исправить это, используя правильные размеры столбцов гибкого кабеля для разрешения экрана, sm = {12} md = {6} lg = {4} - Это помогло

Answer 2

Вы можете попробовать добавить правило для минимального размера:

min-width: 150px;

150px - примерный размер. К сожалению, я не знаю, какой размер ширины должен иметь ввод.

Для класса, который содержит три элемента, в данном случае input-group. Я советую вам добавить класс и применить к нему дополнительные стили.