布尔玛导航栏断点答案

【问题标题】：Bulma Navbar breakpoint布尔玛导航栏断点
【发布时间】：2018-02-15 14:13:55
【问题描述】：

我正在为一个项目使用 Bulma 框架，并且为最大宽度 1024 像素激活了移动菜单。我希望仅在屏幕宽度为 769 像素或以下时才激活移动菜单。我花了几个小时挖掘 sass 文件，但找不到如何覆盖默认行为。

【问题讨论】：

标签： bulma

【解决方案1】：

此问题已修复，可在 0.7.4 中使用

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

【讨论】：

【解决方案2】：

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

它将更改导航栏以在 800 像素左右触发。安装新版本时可能需要重新执行此操作，或者您可以分叉并从 git 安装。

Bulma 的人正在努力解决这个问题，应该很快就会提供： https://github.com/jgthms/bulma/issues/1042

【讨论】：

【解决方案3】：

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

在第 236 行：

+桌面 .导航栏， .导航栏菜单， .navbar-开始， .navbar-end

我将 +desktop 更改为 +mobile

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

然后我改变了

在第 200 行，就在 .navbar > .container 之前显示：块

我将 +touch 更改为 +mobile。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：