无响应Bulma导航

Question

我正在使用Bulma，我需要使导航栏，无响应。我不想要汉堡菜单或者倒塌的导航。

我不知道如何做到这一点，但在文档中没有提到。

Bootstrap有一个你可以添加的类来支持这一点，是否可以使用Bulma？

Answer 1

根据docs的说法，.navbar-menu是负责在移动设备上隐藏导航栏的类。一种解决方案是不使用该类。许多Bulma项目，比如导航栏，都有可选的元素。您可以省略.navbar-menu和.navbar-burger元素，它仍然可以工作。请参见下面的示例。

如果你的导航元素是下拉式的，你可能需要编写一些CSS来纠正它。否则，请考虑使用dropdown组件：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>

​

Answer 2

据我所知，没有内置的类来处理这个问题。然而，根据docs，当你安装bulma时，你可以设置$navbar-断点，这就是将nav折叠成一个汉堡的原因。这不是一个很好的解决方案，因为它需要重新安装。

也就是说，您可能希望创建自己的类来使用media queries处理显示。

Answer 3

您需要自定义sass变量。

$navbar-breakpoint:0;