更改轮播列？答案

【问题标题】：Change carousel columns?更改轮播列？
【发布时间】：2018-05-30 17:58:32
【问题描述】：

我有一个带有 3 列的引导轮播，但我希望它为 2 列用于中等屏幕，1 列用于小屏幕。我怎样才能实现它？

当我将它调整到中等屏幕时，我希望 item3 切换到下一个轮播项目。
轮播滑块图片：
carousel item1 image
carousel item2 image
这是一个反应引导代码。

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

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

【问题讨论】：

请发布您目前拥有的代码。显示您的意思的图片也会有所帮助
向我们展示您的尝试

标签： twitter-bootstrap-3 frontend react-bootstrap

【解决方案1】：

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

Example

【讨论】：

【解决方案2】：

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

<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/

【讨论】：

不隐藏，我想移到下一个轮播项目。