使用自定义CSS更改Foundation的topbar断点？

Question

我正在尝试从Bootstrap迁移到Foundation，但是在尝试确定如何准确更改Foundation顶部栏的断点时遇到问题。 我使用的是CDN版本的Foundation的最小CSS，因此我无权访问设置SASS文件来对此进行修改。 有没有快速的CSS替代解决方法？ 到目前为止，我在这里和Google上的搜索都还没有找到一个可行的解决方案。

Answer 1

在缩小的Foundation CSS下方导入另一个CSS文件，该CSS文件将以topbar为目标

 <link rel="stylesheet" href="foundation-min.css"> <link rel="stylesheet" href="override.css"> 

因此，例如，如果.topbar有margin: 1px; 通过设置另一个margin: 2px;来在override.css上覆盖它margin: 2px; 属性在那里。

这篇文章会对https://stackoverflow.com/a/31511646/6294600有所帮助

您是否检查过这个https://zurb.com/university/lessons/change-foundation-s-default-breakpoints

编辑：这里的提示...

寻找.show-for-medium类...我希望你知道之后该怎么做...不要放弃...

 @media screen and (max-width: 39.9375em) { .hide-for-small-only { display: none !important; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none !important; } } @media screen and (min-width: 40em) { .hide-for-medium { display: none !important; } } @media screen and (max-width: 39.9375em) { .show-for-medium { display: none !important; } } @media screen and (min-width: 40em) and (max-width: 63.9375em) { .hide-for-medium-only { display: none !important; } } @media screen and (max-width: 39.9375em), screen and (min-width: 64em) { .show-for-medium-only { display: none !important; } } @media screen and (min-width: 64em) { .hide-for-large { display: none !important; } } @media screen and (max-width: 63.9375em) { .show-for-large { display: none !important; } } @media screen and (min-width: 64em) and (max-width: 74.9375em) { .hide-for-large-only { display: none !important; } } @media screen and (max-width: 63.9375em), screen and (min-width: 75em) { .show-for-large-only { display: none !important; } } 

这些部分可以在https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css中找到

更改值，我希望这可以回答问题。 快乐编码...

最后一点信息：

更改最小宽度尺寸

@media screen and (min-width: 64em) {
  .top-bar{
    display:none;
   }
 }