我可以让引导列在较小的屏幕上两两进入下一行吗？答案

【问题标题】：Can I have bootstrap columns go to next row two by two on smaller screens?我可以让引导列在较小的屏幕上两两进入下一行吗？
【发布时间】：2015-10-14 00:59:26
【问题描述】：

我有这个 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>

我希望这些列两两进入新行，手机除外。这可能吗？

谢谢

【问题讨论】：

您的意思是对于没有手机的任何设备，每行 2 列？
差不多。我想要连续 4 个，随着屏幕变小，连续两个，然后每行一列。

标签： html css twitter-bootstrap-3 responsiveness

【解决方案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>

【讨论】：

【解决方案2】：

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

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的链接。

【讨论】：

【解决方案3】：

来，看看这个。您将有 4 列用于 PC，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

【讨论】：