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

我有一个Boostrap布局，当屏幕很大时有四个居中的列，小的时候有两列，特别小时有一列。这可以正常工作，除非在列没有包装我想要的时候在小屏幕尺寸上查看。如何确保Bootstrap列在包装时正确对齐

在大屏幕上，它看起来像：

>zzz xxx yyy aaa

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

>zzz 
 
>xxx 
 
>yyy 
 
>aaa

但是，在小屏幕上，它看起来像：

>   zzz 
 
>xxx   yyy 
 
>aaa

我需要它看起来像：

zzz  xxx 
 
yyy  aaa

我的自举代码：

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

任何建议，我怎么能实现我想要什么？

来源

2014-11-25 Bill Noble

你意识到你在这里有6次潜水？这意味着第一个空的行为就像网格中的第一个那样。 – 2014-11-25 11:40:23

啊谢谢。我明白现在出了什么问题。 – 2014-11-25 12:01:19

你有什么居然是：

（空）ZZZ XXX YYY AAA（空）

你的MD允许行中的所有6列（每2的cols），从而使作品罚款（由于它是空的抵消第一个看起来像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>

来源

2014-11-25 11:45:40

如果我删除空的div，这些列会在md大小时偏移左侧，因此不再居中。然而，你对于空白divs从col-sm-6改为col-sm-12的建议非常出色！谢谢。 – 2014-11-25 12:00:19

如果你需要抵消，也许看看：http://getbootstrap.com/css/#grid-offsetting – 2014-11-25 12:03:10

请检查我的编辑上面的偏移示例。应该完全按照您的需要工作，例如：http：//www.bootply.com/hIqARO7GZq – 2014-11-25 12:10:40

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

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

来源

2014-11-25 11:39:19 anpsmn

解决了sm大小对齐时的问题，但现在md大小不再居中，而是偏移到左侧。 – 2014-11-25 11:56:08

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

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

来源

2015-01-29 12:07:31

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

回答

相关问题