有没有办法在bulma css框架中改变移动的的padding值？

cczfrluj 于 2023-01-03 发布在其他

关注(0)|答案(3)|浏览(152)

所以我用Bulma css框架建了一个网站。我把每个元素的左填充和右填充设置为10%。在移动的设备上，填充需要更小。也许5%或更小也没关系。但是我不知道如何只在移动设备上改变填充。我在他们的文档中没有找到帮助。有人能帮忙吗？例如：

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

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

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

3条答案

你可以在css中使用媒体查询来为特定设备分配类别。请参考this
移动的设备示例：

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

Bulma拥有visibily helpers，可根据所用设备（移动的、平板电脑、台式机、宽屏和全高清）显示或隐藏元素。
您可以将is-hidden-tablet类应用于HTML中的nav，并在CSS中使用它，如下所示：

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

让导航菜单仅在移动的上显示，并使用自定义填充。

Sass混合示例

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

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

命名混合