Question

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

我无法弄清楚如何做到这一点，文档中没有提及。

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

Answer 1

根据docs，.navbar-menu是负责在移动设备上隐藏导航栏的类。一种解决方案是不使用该类。许多布尔玛项目（例如导航栏）具有可选元素。您可以省略.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>

Answer 2

据我所知，没有内置的类可以处理此问题。但是，根据docs，在安装bulma时，您可以设置$ navbar-breakpoint，这是将nav折叠成汉堡包的原因。这不是一个很好的解决方案，因为它需要重新安装。

也就是说，您可能想要创建自己的类，以使用media queries处理显示。

无响应布尔玛导航

2 个答案: