有没有办法仅在 bulma css 框架中更改移动设备的填充值？

Question

所以我使用 Bulma css 框架构建了一个网站。我将每个元素的 padding-left 和 padding-right 设置为 10%。在移动设备上，填充需要更小。也许5%或更少，这并不重要。但我不知道如何仅更改移动设备的填充。我在他们的文档中没有找到帮助。有人可以帮忙吗？例如：

nav{    
    padding-left: 10%;
    padding-right: 10%;
}

我想成为：（但仅适用于移动设备）

nav{    
    padding-left: 5%;
    padding-right: 5%;
}

Answer 1

您可以在 CSS 中使用媒体查询来将类分配给特定设备。请参考这个

移动设备示例：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .mobile-device {
        //styles for mobile
    }
}

Answer 2

Bulma 有 visibily helpers，可以根据使用的设备（手机、平板电脑、台式机、宽屏和全高清）显示或隐藏元素。
您可以将

is-hidden-tablet

类应用到 HTML 中的

nav

并在 CSS 中像这样使用它：

nav.is-hidden-tablet{    
    padding-left: 5%;
    padding-right: 5%;
}

仅在移动设备上显示带有自定义填充的导航菜单。

Answer 3

Sass mixin 的示例

nav {
  padding-left: 10%;
  padding-right: 10%;
}

@include mobile {
  nav {
    padding-left: 5%;
    padding-right: 5%;
  }
}

命名的mixins

Answer 4

您可以查看 bulma 提供的 mixin 来定义您自己的规则。