基金會4中心僅在小屏幕上對齊

新的使用Zurb基金會，並從版本4開始，我無法找到一種方法讓網格僅在小屏幕上對齊中心，然後恢復到默認網格上大屏幕。是否有任何與Foundation 4一起提供的原生類可以做到這一點？基金會4中心僅在小屏幕上對齊

我看了一下他們的http://foundation.zurb.com/docs/components/grid.html文檔這表明了類「小中心」和「大中心」，它不工作打算，但有一條線說

小版本將如果不被大版本覆蓋，則通過所有斷點。

對我來說，這聽起來像我要麼需要創建一個覆蓋大顯示從「小中心」類居中對齊一類，或有存在的類 - 這我無法找到。

下面是一些示例代碼，我與測試：

如預期般，但我希望所有三列到中心只有小屏幕對準

<div class="row"> 
    <div class="large-2 columns"> 
     <span>text</span> 
    </div> 
    <div class="large-6 columns"> 
     <span>text</span> 
    </div> 
    <div class="large-4 columns"> 
     <span>text</span> 
    </div> 
</div>

的網格系統，功能。

如果我確實需要創建自己的類和樣式，是否有人知道SCSS可以提供給社區已解決此問題？

來源

2013-04-17 Ash

您是否希望所有三列在一行上居中對齊？ –

附註：我用SCSS標記了這篇文章，但它默認爲SASS。我知道它們基本上是相同的，但是它不能被標記爲SCSS的任何原因？ – Ash

@vonv。是的，每個「列」應該在小顯示器上堆疊並居中對齊 – Ash

事實證明，這是不支持外的箱子。雖然有一個簡單的解決方法，那就是通過添加覆蓋，正如我在評論中所建議的那樣。

@media only screen and (min-width: 48em) { 
    .column.large-left, 
    .columns.large-left { 
     float: left !important; 
    }   
}

注意使用em是做事的基礎，標準的方式。這應該照顧smal-centered問題。然後您只需將該類添加到您不想居中的任何small-centered元素。你可以see it in action here。

來源

2013-04-17 14:48:14

謝謝@vonv。這很好。感謝您花費在此上的時間，並提供遵循基金會標準的工作示例。 – Ash

不客氣。 –

您需要檢出CSS文件並搜索僅用於小屏幕的媒體查詢，然後爲該特定列添加屬性。

來源

2013-04-17 06:38:53 SuperManSL

Yea查看了源代碼，但找不到任何邏輯上命名以符合目的的東西。也許這個功能不存在 – Ash

那麼你必須添加新的CSS屬性到特定的媒體查詢。我現在沒有基礎的css文件，但我知道有媒體查詢，您可以使用它們爲每個分辨率/設備/類型執行不同的樣式。 – SuperManSL

你不能用Foundation非語義類來做到這一點。

你必須手工做出來，（希望）語義：

@media only screen and (max-width: 767px) { 
    .some-container { text-align: center; } 
}

來源

2013-04-17 14:15:12

基金會4中心僅在小屏幕上對齊

回答

相關問題