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

Question

我有一个 Boostrap 布局，在大屏幕时有四个居中列，在小屏幕时有两列，在超小屏幕时有一列。这工作正常，除非在小屏幕尺寸下查看时列没有按我希望的方式换行。

在大屏幕上看起来像:

>zzz    xxx    yyy    aaa

在超小屏幕上它看起来像:

>zzz
>xxx
>yyy
>aaa

但在小屏幕上它看起来像:

>            zzz
>xxx         yyy
>aaa

我需要它看起来像:

zzz      xxx
yyy      aaa

我的 Boostrap 代码是:

        <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> 

关于如何实现我想要的，有什么建议吗？

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>