如何確保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列在包裝時正確對齊

回答

相關問題