Bulma导航栏断点

Question

我正在使用Bulma框架进行项目开发，手机菜单在最大宽度为1024px时被激活。 我希望只有当屏幕宽度为769px或以下时才激活手机菜单。我花了几个小时查找sass文件，但无法找到如何覆盖默认行为。

- aviattor

---

转到实用程序 > 初始变量。在第46行寻找 // Responsiveness。您可以查看和更改下面列出的断点。 - sol

谢谢，这是一种方法，但它会影响整个站点的断点。我正在寻找的是一种在768像素以下的屏幕上启用移动导航的方法。目前它在1024像素以下是激活的。 - aviattor

为什么不编写一些自定义媒体查询呢？ - sol

Answer 1

这个问题已经被修复，并在0.7.4版本中正常工作。

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

- Alex C

---

样式似乎有点问题。我看到了与这个问题相同的行为（而且我使用的是Bulma 0.7.5）： https://github.com/jgthms/bulma/issues/2334 - charles-allen

在Bulma 0.9.1中对我有效。不要忘记导入bulma initia-variables.sass。 - O. Schnieders

Answer 2

在Bulma 0.7.1版本中，您可以前往node_modules/bulma/sass/components/navbar.sass并在2个位置将+desktop更改为+tablet。这将使导航栏在大约800像素时触发。当您安装新版本时，您可能需要重新执行此操作，或者您可以从git进行fork和安装。Bulma团队正在修复此问题，很快就会推出：https://github.com/jgthms/bulma/issues/1042。

- Vidar

Answer 3

在navbar.sass中，我做了两个更改。

在第236行： +desktop .navbar, .navbar-menu, .navbar-start, .navbar-end

我将+desktop改为+mobile。

然而，这仍然有一些在打开汉堡菜单时的样式残留。

所以我在第200行，在.navbar > .container之前，修改了： display: block

我将+touch改为+mobile。

- Andy Bogdan

Answer 4

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

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

我认为Bulma默认的移动断点768px存在一个偏差：768应该是第一个平板电脑宽度，而不是769。（iPad横屏宽度为768px）因此，我还将initial-variables.sass中的$tablet变量更改为760px。

我最近为我的博客https://tomicloud.com执行了此操作，如果您想测试，请尝试。

- Tomi Mickelsson