Question

更新：

我在GitHub上创建了功能请求，您可以跟踪here。

我正在使用Bulma。现在，当宽度小于1088px时，导航栏将折叠并更改为汉堡菜单。我希望仅在小于768像素或更小时折叠它。

我阅读了responsive document，但仍然找不到改变它的CSS唯一方法。

我希望找到一种无需更改布尔玛源代码即可覆盖的方法。任何想法？谢谢

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级别完成：）

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

1 个答案: