如何在Foundation中使用語義網格？

我在語義網格混搭中遇到了一些麻煩。如果我錯過了一些明顯的事情，我很抱歉，但我尋求你的幫助。我有以下代碼：如何在Foundation中使用語義網格？

的index.html

<header> 
    <a id="logo" href="#">Logo Link</a> 
    <div id="search"> 
     <span class="prefix">#</span> 
     <input type="text"> 
    </div> 
</header>

app.scss

header { @include outerRow(); 
    #logo { @include column(8); } 
    #search { @include column(4); @include innerRow(collapse); 
    span { @include column(3); } 
    input { @include column(9); } 
    } 
}

這與屏幕寬工作正常，但前綴延伸到整個寬度窄模式。我是這次冒險的新手，但我相信它會自行重新計算窄屏幕，還是必須使用@media才能正常工作？

新發布的圖像所以這裏有鏈接：

寬（正確） - http://imgur.com/dtsGtxM

窄（foofed） - http://imgur.com/jX4D1NU

編輯：嗯解決方案似乎是：

span { @include column(3); @include mobileColumn(1); } 
input { @include column(9); @include mobileColumn(3); }

雖然我不完全理解它。仍不能確定是否呼籲在列一個新的嵌套行是可以接受的，下面，但它似乎工作：

#search { @include column(3); @include innerRow(collapse);

來源

2013-02-18 TheHerk

哎，我覺得如果你在基金會的版本，您使用的，您的文章標題註明這將是偉大的，它是爲其他人找基金會的問題非常有幫助... – ithil 2013-09-25 07:41:57

基金會已在768px使用媒體查詢默認斷點。

因此，在較大的設備上查看時，它使用column（）mixin，然後在較小的屏幕上使用mobileColumn（）mixin。

此外，設置一個div（你的情況＃搜尋是一列，內行將會產生意想不到的結果，你可以換你列在一個單獨的內部行容器：

<header> 
    <a id="logo" href="#">Logo Link</a> 
    <div id="search"> 
     <div class="inner-row"> 
      <span class="prefix">#</span> 
      <input type="text"> 
     </div> 
    </div> 
</header>

和

頭{@include outerRow（）; #logo {@include柱（8）;} ＃搜尋{@include柱（4）; 跨度{@include塔（3）;} 輸入{@包括列（9）;} } .inner-row {@i nclude innerRow（collapse）; }}

http://foundation.zurb.com/old-docs/f3/media-queries.php

來源

2013-11-11 11:46:52

如何在Foundation中使用語義網格？

回答

相關問題