如何仅在布尔玛中通过CSS更改导航断点？

Question

更新：

我在 GitHub 上创建了一个功能请求，您可以在此处跟踪。

---

我正在使用布尔玛。现在，当宽度小于 1088 像素时，导航栏会折叠并更改为汉堡菜单。我希望只有在小于 768px 甚至更小时才能折叠。

我阅读了响应式文档，但仍然找不到仅 CSS 的方法来更改它。

我希望找到一种在不改变Bulma源代码的情况下覆盖的方法。任何想法？谢谢

jsfiddle

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>
    </div>
  </div>
</nav>

Answer 1

首先你需要找到它的css文件

例如它的 docs.min.css

那么这样的代码：-

@media screen and (min-width: 1088px) {
    .navbar,.navbar-end,.navbar-menu,.navbar-start {
        align-items:stretch;
        display: flex
    }

^^^ 当屏幕低于 1088 时，此代码会进行修改

该文件中有多个以此开头的 css 代码：-

@media screen and (min-width: 1088px)

所以，你需要找到它们全部并替换为

@media screen and (min-width: 768px)

就这样，任务在 css 级别完成:)