以 Bulma 为中心的导航栏移动问题

Question

我正在为 React (create-react-app) 中的当前项目创建导航栏。我正在为所有 css 相关的东西使用 Bulma 框架。目前的问题出在导航栏上，导航栏的元素应该一起居中并且在移动设备上可见。

虽然单独使用 Bulma 是不可能的，但我使用了一些 scss 修改，我发现它有点工作：

样式表

.navbar-start { // fixes is-expanded on the navbar items
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    text-align: center;
}

.navbar-item {
    border-style: solid;
    border-color: black;
    border-width: medium;
}

#center-item {
    border-right-width: 0;
    border-left-width: 0;
}

HTML（仅限导航栏）

<div>
  <nav className="navbar is-dark" role="navigation" aria-label="main navigation">
    <div className="container has-text-centered ">
      <div className="navbar-menu">
        <div className="navbar-start">
          <Link className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/">/home</Link>
          <Link id="center-item" className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/visual">/visual</Link>
          <Link className="navbar-item is-expanded has-text-weight-semibold is-size-5" to="/about">/about</Link>
        </div>
      </div>
    </div>
  </nav>
</div>

最后，为了让这个水平导航栏在移动设备上可见，我还根据 scss 文件中的 this 修改了一个 bulma 变量。: $navbar-breakpoint: 0.

最终问题如下：

这是在 iPhone 7 上。我无法通过调整 window 的大小在桌面 Firefox 上重现它。如需进一步检查，您可以使用该站点的实时版本：http://51.15.246.99/。我已经尝试了很多方法来解决此问题，因此我们将不胜感激。

Answer 1

这个问题的解决方案有点老套。在 GitHub 的 Bulma 问题页面上发布相关信息并在设备上进行一些仔细的调试后，发现问题是由 Bulma 中的这条（删节）css 规则引起的：

.navbar-menu {
    margin-right: -0.75rem;
}

引用框架的创建者的话“这是为了将导航栏容器与其他容器对齐。但它应该只存在于桌面上”。它存在于移动设备上，因为我将导航栏断点设置为 0。解决方法是将其包含在我的自定义 css:

.navbar-menu {
    margin-right: 0 !important;
}

GitHub 问题：https://github.com/jgthms/bulma/issues/3055

以 Bulma 为中心的导航栏移动问题

Bulma centered navbar mobile issues

html

css

navbar

bulma

样式表

HTML（仅限导航栏）