2

我有三个轮播，span4当我将网页缩小到平板电脑大小时，我不希望它们垂直排列。我希望在我将网页缩小到手机大小时发生这种情况。

因为，当我的浏览器是平板电脑大小时，轮播会垂直放置并被拉伸（我不想要）。这是我的代码：

div class="container">
    <div class="row-fluid">
            <div class="span4 w" >
                <div id="myCarousel" class="carousel slide" style="overflow: hidden">
                    <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>
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <img class="carouselImg" src="fall.jpg"/>
                        </div>
                        <div class="item"> <img class="carouselImg"  src="clock8.jpg"/></div>
                        <div class="item"> <img  class="carouselImg" src="color.jpg"/></div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>
    </div>
<div class="span4 w">
            <div id="myCarousel1" class="carousel slide" style="overflow: hidden">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel1" data-slide-to="1"></li>
                    <li data-target="#myCarousel1" data-slide-to="2"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"> <img class="carouselImg"  src="color.jpg"/></div>
                    <div class="item"> <img class="carouselImg"  src="dots.jpg"/></div>
                    <div class="item"> <img class="carouselImg"  src="light.jpg"/></div>
                </div>
                <!-- Carousel nav -->

            </div>

        </div>
        <div class="span4 w">
            <div id="myCarousel2" class="carousel slide " style="overflow: hidden">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel2" data-slide-to="1"></li>
                    <li data-target="#myCarousel2" data-slide-to="2"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"> <img class="carouselImg"  src="ball.jpg"/></div>
                    <div class="item"> <img class="carouselImg"  src="fall.jpg"/></div>
                    <div class="item"> <img class="carouselImg"  src="ball.jpg"/></div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel2" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel2" data-slide="next">&rsaquo;</a>
            </div>
        </div>
    </div>

4

2 回答 2

1

不要row-fluid在包含的 div 上使用类。只需使用class="row".

使用row-fluid打开流体/自适应布局，该布局将根据视口大小重新排列列。

更新

在这里阅读http://twitter.github.io/bootstrap/scaffolding.html#gridSystem这解释了网格系统是如何工作的。您是否包含响应式 CSS 文件？如果是这样，只需将其删除即可使其停止。

于 2013-06-18T15:56:17.980 回答
1

您可以在 CSS 中使用这样的 @media 查询...

@media (min-width: 481px) and (max-width: 767px) {
    .row-fluid .span4 {
        width:31%;
        float:left;
        margin:4px;
    }
}

这将覆盖.row-fluid span4. 您可能需要相应地调整 .span4 的宽度/边距。

演示： http: //www.bootply.com/64736

于 2013-06-18T16:17:07.420 回答