在较小的屏幕上，我可以让 bootstrap 列两两转到下一行吗？

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

给，看这个。 PC 有 4 列，小型设备有 2 列，移动设备等超小型设备有 1 列。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="row fluid">
            <div class="col-xs-12 col-sm-6 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-xs-12 col-sm-6 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-xs-12 col-sm-6 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-xs-12 col-sm-6 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>

为了更好地理解其工作原理，请查看 bootstrap 的文档 - http://getbootstrap.com/css/#grid-example-mixed-complete

Answer 3

如果我没理解错你想要输出

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>

这是 link 到 JSFiddle。

在较小的屏幕上，我可以让 bootstrap 列两两转到下一行吗？

Can I have bootstrap columns go to next row two by two on smaller screens?

html

css

twitter-bootstrap-3

responsiveness