javascript - Bootstrap : Show on Carousel Product Slider on smallest View only one product

Question

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

更新:这是我的 fiddle :

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

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

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