波本邦整潔的網格，在移動斷點

Question

我有一個真正的基本網站，使用sass和波旁整潔的網格框架。我試圖達到與（http://neat.bourbon.io/examples/）網站相同的效果。在800px寬度的網格似乎有一個斷點，並放下跨度列，並達到100％的寬度。

下面的代碼輸出一個包裝和兩個4和8跨度div。當我將瀏覽器縮小到300px時，網格仍然保留，標題和內容div不會中斷，並且全寬度爲100％。

我該如何達到這個效果？我已經嘗試使div 100％默認和at和斷點添加span-columns，但這是行不通的。謝謝。

.wrapper { 
@include outer-container; 
.title {@include span-columns(4);} 
.content {@include span-columns(8);} 
} 

<div class="wrapper"> 
<div class="title"></div> 
<div class="content"></div> 
</div> 

Answer 1

您必須指定斷點才能完成該操作。只需@include Neats media($your_settings)，你準備好去閱讀更多here。類似這樣的：

.wrapper { 
    @include outer-container; 

    .title { 
    @include span-columns(4); 

    @include media(max-width 300px) { 
     @include span-columns(12); // or whatever you need for 100% width 
    } 
    } 

    .content { 
    @include span-columns(8) 
    } 
}