Bulma Navbar断点

Question

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

Answer 1

在Bulma版本0.7.1上，您可以转到node_modules/bulma/sass/components/navbar.sass，然后在两个位置将+desktop更改为+tablet。

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

布尔玛家伙正在努力解决这个问题，应尽快推出： https://github.com/jgthms/bulma/issues/1042

Answer 2

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

第236行：

+桌面   .navbar，   .navbar-menu，   .navbar-start，   .navbar-end

我将+ desktop更改为+ mobile

但是，当您打开汉堡菜单时，仍然保留了一些样式。

所以我改变了

第200行，.navbar> .container之前     显示：阻止

我将+ touch更改为+ mobile。

Answer 3

此问题已解决，可以在0.7.4

中使用

If Not Intersect(Target, Range("O2:O10000")) Is Nothing Then [P2: P10000]

   lineNumber=target.row

Dim xO

Answer 4

导航栏汉堡包菜单仅在移动屏幕上显示的另一种简便方法是在https://bulma-customizer.bstash.io上生成自定义布尔玛版本

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

我还认为Bulma默认移动断点768px有一个错误：768应该是第一个平板电脑的宽度，而不是769。（iPad人像的宽度是768px）因此我也更改了{{1} }变量从$tablet到760px。

如果您想对其进行测试，我最近在我的博客https://tomicloud.com中进行了此操作。