Question

我试图从Bootstrap转移到Foundation，但我在尝试确定如何准确更改Foundation中topbar的断点时遇到了问题。我正在使用基础的缩小CSS的CDN版本，因此我无法访问设置SASS文件来修改它。是否有快速的CSS覆盖解决方法？到目前为止，我在这里的搜索和谷歌尚未找到可行的解决方案。

Answer 1

在缩小的基础CSS下面导入另一个CSS文件，该文件将定位到顶部栏

＆＃13;

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

＆＃13;

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

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

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

编辑：这里有一个提示......

寻找.show-for-medium课程...我希望你知道在那之后该做什么......不要放弃......

＆＃13;

@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; } }

＆＃13;

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

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

最后的信息：

更改最小宽度

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

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

1 个答案: