Question

我有一个Boostrap布局，当屏幕较大时有四个居中的列，小的时候有两列，超小的时候有一列。这样可以正常工作，除非在小屏幕尺寸下查看时列没有包装我想要的方式。

在大屏幕上看起来像：

＆＃13;

>zzz    xxx    yyy    aaa

＆＃13;

在一个额外的小屏幕上，它看起来像：

＆＃13;

>zzz
>xxx
>yyy
>aaa

＆＃13;

但在小屏幕上看起来像：

＆＃13;

>            zzz
>xxx         yyy
>aaa

＆＃13;

我需要它看起来像：

＆＃13;

zzz      xxx
yyy      aaa

＆＃13;

我的Boostrap代码是：

＆＃13;

        <div class="row text-center">
            <div class="col-xs-12 col-sm-6 col-md-2 text-center">    
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center">zzz</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center">xxx</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center">yyy</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2">
                 <div class="text-center">aaa</div>  
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 text-center">         
            </div>
        </div>

＆＃13;

关于如何实现我想要的任何建议？

Answer 1

你拥有的实际上是：

（空）zzz xxx yyy aaa（空）

你的md允许一行中的所有6列（每列2列），因此可以正常工作（由于它是空的，可以将第一列看似偏移2列）

你的xs使它们全部为12列宽，所以这看起来也很有效，因为它们都在伸展（顶部和下面有一个空白列）。

你的sm工作正常，但看起来好像不是因为你有额外的列。

要么删除这些空div，要么你真的需要它们：

    <div class="row text-center">
        <div class="col-xs-12 col-sm-12 col-md-2 text-center">    
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">zzz</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">xxx</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">yyy</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">aaa</div>  
        </div>
        <div class="col-xs-12 col-sm-12 col-md-2 text-center">         
        </div>
    </div>

[编辑 - 使用抵消]

如果你只是在md值上寻找偏移量，这应该可以工作，而不是用空div来混淆你的标记。

    <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-2 col-md-offset-2">
             <div class="text-center">zzz</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">xxx</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">yyy</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">aaa</div>  
        </div>
    </div>

Answer 2

你有一个空白的div。删除它，它将按预期工作。

<div class="col-xs-12 col-sm-6 col-md-2 text-center">     </div>

Answer 3

班级col-md-*的空间最小。如果您使用min-height: 0px;，它可能会对您有所帮助。

<div class="col-xs-12 col-sm-6 col-md-2 text-center" style="min-height: 0px;">

如何确保Bootstrap列在包装时正确对齐

3 个答案: