Bulma Navbar断点

Question

我正在为项目使用Bulma框架，并且移动菜单被激活为最大宽度1024px。我想只在屏幕宽度为769px或更低时激活移动菜单。我花了几个小时挖掘sass文件，但无法找到如何覆盖默认行为。

Answer 1

在Bulma版本0.7.1上你可以去node_modules/bulma/sass/components/navbar.sass，然后在两个地方将+desktop改为+tablet。

它会将导航栏更改为大约800px触发。您可能必须在安装新版本时重做此操作，或者您可以将其分叉并从git安装。

Bulma人正在努力解决这个问题，应尽快推出：https://github.com/jgthms/bulma/issues/1042

Answer 2

在navbar.sass中，我改变了两件事。

在第236行：

+ desktop .navbar，.navbar-menu，.navbar-start，.navbar-end

我将+桌面更改为+ mobile

然而，当你打开汉堡包菜单时，仍然有一些造型残余。

所以我改变了

在第200行，就在.navbar> .container display：block之前

我将+ touch更改为+ mobile。

Answer 3

导航栏汉堡包菜单仅在移动屏幕中出现的另一种简单方法是在https://bulma-customizer.bstash.io生成自定义Bulma构建

打开组件 - > navbar.sass，并将最后一个选项$navbar-breakpoint设置为$ tablet。

我还认为Bulma默认移动断点768px有一个错误：768应该是第一个平板电脑宽度，而不是769.（iPad肖像的宽度为768px）因此我也将$tablet的initial-variables.sass变量更改为760px。

我最近为我的博客https://tomicloud.com做了这个，如果你想测试它。

Answer 4

这已得到修复，可在0.7.4中使用

// Update Bulma's derived variables
@import "~bulma/sass/utilities/initial-variables.sass";
$navbar-breakpoint: $tablet;
@import "~bulma/bulma.sass";