不响应的Bulma导航栏

Question

我正在使用Bulma，需要制作非响应式的导航栏。我不想要汉堡菜单或折叠式导航。

然而我无法找到如何实现这一点，文档中也没有提及。

Bootstrap有一个可以添加的类来支持这个功能，那么在Bulma中能否实现呢？

- Harry Blue

---

请问您能否展示一下您目前尝试过的内容，以及Bootstrap中哪个类支持导航功能？ - monikapatelIT

Answer 1

根据文档，.navbar-menu是在移动设备上隐藏导航栏的类。一个解决方法是不要使用该类。许多Bulma项目（例如导航栏）都有可选元素。您可以省略 .navbar-menu 和 .navbar-burger 元素，它仍然有效。请参见下面的示例。

如果您有下拉式导航元素，则可能需要编写一些CSS来对其进行移动端的修正。否则，可以考虑使用下拉组件：https://bulma.io/documentation/components/dropdown/

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
    <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 class="navbar-item">
            Home
          </a>

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

    </div>
    </nav>

- just-a-web-designer

Answer 2

从我所了解的情况来看，没有内置的类来处理这个问题。然而，根据安装bulma时的文档，您可以设置$navbar-breakpoint，它负责将导航栏折叠成汉堡包。这不是一个很好的解决方案，因为它需要重新安装。

所以说，您可能希望自己创建一个类来处理媒体查询的显示。

- Jake Doran

Answer 3

你需要自定义Sass变量。

$navbar-breakpoint:0;

- Mahdi Rezaei