基础 6 断点

Question

我是foundation新手，本来就是bootstraper。我有一个 3 列的行，我创建了一个最大宽度为 1300 像素的容器；

我的问题是我需要它在 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):

小 - > 640px 中 - > 1024px 大 - 1024 像素和更大。

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

在我看来，Foundation 比 bootstrap 灵活得多 - 因此可能需要一些时间来调整，但这是完全值得的。

尽情享受吧！

基础 6 断点

Foundation 6 Break point

css

zurb-foundation