我可以在较小的屏幕上将引导列逐个转到下一行吗？

Question

我有这个HTML代码:

        <div class="row fluid">
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
        </div>

除了手机外,我希望这些列能够逐行转到新行.那可能吗？

谢谢

Answer 1

你可以使用这样的东西:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3>
        Content
    </div>
</div>

Answer 2

如果我理解正确你想要输出

1 2 3 4 

在中等屏幕尺寸,

1 2
3 4 

在小屏幕尺寸和

1
2
3
4 

超小屏幕尺寸

你可以做到,使用col-xs-12,col-sm-6以及col-md-3类,如下面的代码.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            3
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            4
        </div>        
    </div>
</div>

这是JSFiddle的链接.