基金会6 Break point

Question

我是新来的基金会，我原本是一个bootstraper。我有一个3列行，我创建了一个容器，最大宽度为1300px;

我的问题是我需要它在767打破单列，但现在它不会破坏，直到640px，是由列控制？

<div class="row expanded"> 
    <div class="container"> 
    <h3>News</h3> 
    <div class="columns small-12 small-4 medium-4">  
     <img src="img.png"> 
     <span class="text-element">Text</span> 
     <h5>Heading Level 5</h5> 
     <a class="link-button button" href="#">Learn More</a> 
    </div> 
    <div class="columns small-12 small-4 medium-4">  
     <img src="img.png">  
     <span class="text-element">Text</span> 
     <h5>Heading Level 5</h5> 
     <a class="link-button button" href="#">Learn More</a> 
    </div> 
    <div class="columns small-12 small-4 medium-4"> 
     <img src="img.png">  
     <span class="text-element">Text</span> 
     <h5>Heading Level 5</h5> 
     <a class="link-button button" href="#">Learn More</a> 
    </div> 
    </div> 

Answer 1

基金会的默认断点（as noted here）：

小 - > 640像素， 中 - > 1,024像素 大 - 1,024像素和更大。

如果您希望控制这些断点，您需要切换到sass版本，您只需更改宽度并根据需要配置框架即可。链接在这里：http://foundation.zurb.com/sites/docs/media-queries.html#default-media-queries

在我看来，基金会是更灵活然后bootstrap - 所以它可能需要时间来调整，但它是完全值得的。

享受！