Bootstrap：在最小的轮播产品滑块上显示仅查看一个产品答案

【问题标题】：Bootstrap: Show on Carousel Product Slider on smallest View only one productBootstrap：在最小的轮播产品滑块上显示仅查看一个产品
【发布时间】：2014-07-19 19:13:35
【问题描述】：

我正在使用这个例子：http://sevenx.de/demo/bootstrap-carousel/inc.carousel/product-slider.html 当我让我的 BrowserWindow 变小时，框首先开始变小，但是当我达到大约 990 像素的最小宽度时，单个产品在我的起始宽度的 4 块中排列。是否可以在最大宽度上仅显示一个产品：990 像素？因为它看起来不像现在那么好。抱歉，我是全新的，我不明白如何为我的想法设置轮播。非常感谢您的帮助！

更新：这是我的小提琴：

`http://jsfiddle.net/bGwXd/`

当您在我的小提琴中增大 RESULT-BLOCK 时，您会看到开始视图，4 个产品在一条水平线上。当你把它变小时，一条垂直线上有 4 个产品。现在我只希望在我的垂直线上有一个产品用于左右导航。

【问题讨论】：

请为您的问题创建一个小提琴/引导程序，并在您的问题中向我们提供一些代码。
我更新了，这是我的小提琴：jsfiddle.net/bGwXd

标签： javascript jquery css twitter-bootstrap carousel

【解决方案1】：

在 div .item 中，你有 .row 和 4 个 .col-md-3 div，你删除其他 3 个，只留下一个，给它一个 .col-md-12 类。试试看这是你想要的吗？ http://jsfiddle.net/bGwXd/1/

<div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">

                            <div class="col-md-12">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide12">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide21">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div>        
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide22">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide23">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide24">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide31">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div>        
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide32">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide33">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                  <img src="http://placehold.it/300x200/" alt="Slide34">
                                  <div class="caption">
                                    <h3>Product label</h3>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                                    <p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
                                  </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>

                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>                
            </div><!-- End Carousel -->

【讨论】：

感谢您的提琴，但不幸的是，这不是我想要的。我希望，只有一个（所有）产品显示在最小的一侧，而不是垂直显示在下方。

【解决方案2】：

轮播通过显示行中的所有项目来工作。目前，您每行有 4 个项目，因此它们都会显示出来。

>990px 处的视图响应以水平显示它们 4 个，

轮播中没有任何方法可以在不重构 html 的情况下单独查看单个元素。您需要添加一些 javascript，这些 javascript 将根据大小使用轮播回调函数将相关项目移动到它们自己的行中。

【讨论】：

【解决方案3】：

我知道已经晚了，但是来这里寻求帮助的人应该试试this one：

【讨论】：