Question

我有一个带3列的自举旋转木马，但我希望它有2列用于中等屏幕，1列用于小屏幕。我怎样才能实现它？

当我将其调整到中等屏幕时，我希望item3转移到下一个轮播项目旋转木马滑块图像：
carousel item1 image
carousel item2 image
这是一个反应引导代码。

＆＃13;

<Carousel datainterval="false">
            <Carousel.Item>
                <Row style={{ width: "80%", margin: "auto" }}>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img3.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item1</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img1.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item2</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img2.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item3</h3>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Carousel.Item>
            <Carousel.Item>
                <Row style={{ width: "80%", margin: "auto" }}>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img4.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item4</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img5.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item5</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img6.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item6</h3>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Carousel.Item>
        </Carousel>

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

Answer 1

您可以为要隐藏的列尝试bootstrap显示属性。例如：

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

https://getbootstrap.com/docs/4.0/utilities/display/

Answer 2

为中型屏幕定义md，更改其查询并设置md = {6}和sm = {12}。因此，您可以设置中等屏幕2列，屏幕设置列

Example

更改轮播列？

2 个答案: