Question

我想使用Bootstrap网格系统来实现以下目标：

- 当屏幕宽度大于col-lg-X类的阈值时，则有2行有3列，但是一旦屏幕宽度低于col-lg-X，我希望这些列折叠分为3行，每列2列。这可能与靴带网格有关吗？

When greater than the break threshold of col-lg-X:

X   X   X
X   X   X

when less than col-lg-X:

X   X
X   X
X   X

我开始的内容如下：

        <div class="row"> 
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[0] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[1] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[2] : ''}}"></img>
            </div>  
        </div>
        <div class="row">
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[4] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[5] : ''}}"></img>
            </div>
        </div>

我试图通过做这样的事情来变得狡猾，但很明显col-lg-6只会在小于该阈值之后破坏。我

<div class="row">
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

好的，如果我没有弄错你的问题，你可以指定多个列布局。作为：

 <div class="col-sm-4 col-lg-6 gallery-image">
 </div>

引导程序会将其解释为

 if (screen.width >= 1200px)
        //class is col-lg-6
 else 
     //class is col-sm-

Answer 2

使用'md'断点..它是从lg

开始的下一个断点

<div class="row"> <div class="col-lg-4 col-md-6">..

演示：http://codeply.com/go/fl5EE6jVFQ

Twitter Bootstrap网格 - 非传统的中断行为

2 个答案: