Bulma带有两行的导航栏

Question

什么是在bulma.io中重新创建这个的最佳方法？包括响应式、汉堡菜单等。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">

    <div class="container">

        <div class="row navbar-first-row">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-main-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="sr-only">Toggle navigation</span>
            </button>

            <div class="navbar-right navbar-text hidden-xs">
                Logo
            </div>

            <h1 class="h4 navbar-text">Really long application title</h1>

        </div>

        <div class="row navbar-second-row">

            <div class="navbar-right navbar-text hidden-xs">Logged User</div>

            <div class="collapse navbar-collapse" id="navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>

        </div>

    </div>

</nav>

--- 简而言之 ---

我最近转向了Vue.js前端开发，这导致了我工作流程上的巨大变化。我也想尝试从Bootstrap3切换到更简洁的Bulma。一开始使用Bulma体验非常好，直到我想做一些稍微出乎寻常的事情，比如两行导航栏。在尝试了一个小时后，我很快又回到了Bs3。

使用Bootstrap的主要优势在于，已经有成千上万的怪人想要实现各种疯狂的东西，并已经问了数十个愚蠢的问题。其中大部分都已经得到了耐心社区的答复，现在对公众可用。不幸的是，Bulma目前还没有这样的资源。

我认为，现在作为程序员至少70%的时间都是在Stack Overflow上搜索信息。快速研究主题的能力是必不可少的。我没有时间自己探索所有的内容，我有家庭要养活，我的客户不关心我使用哪个框架。但至少我决定问问，也许将来会有人面临类似的挑战。干杯。

- xpuu

---

在您的示例中，对于较小的屏幕，标志和登录区域会在移动设备上隐藏。这是您想要保留的吗？ - sol

是的，没错。这个模板是为内部应用程序设计的。在移动设备上，标志/登录并不那么重要。 - xpuu

Answer 1

有很多种方法可以实现这个目标。以下是一种方法：

按照文档中的说明创建您的菜单，然后... HTML

1. 将“应用程序标题”添加为navbar-brand的第一个子元素。
2. 在包含标志的navbar-item上添加is-hidden-touch修饰符。这将在移动设备和平板电脑上隐藏它。
3. “已登录用户”内容可以添加到navbar-end中。

CSS

1. 我们需要使navbar-brand占据自己的“行”。为此，请将其宽度更新为100%。
2. 然后，向navbar-brand添加justify-content属性以均匀分布其内容。
3. 为了确保navbar-menu移动到新的“行”，您必须向navbar添加flex-wrap属性。

小提琴

.navbar-brand {
  width: 100%;
}

.navbar {
  flex-wrap: wrap;
}

.navbar-brand {
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item">Really Long Application Title</a>
    <a class="navbar-item is-hidden-touch">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma" width="112" height="28">
    </a>
    <button class="button navbar-burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">Item 1</a>
      <a class="navbar-item">Item 2</a>
      <a class="navbar-item">Item 3</a>
      <a class="navbar-item">Item 4</a>
      <a class="navbar-item">Item 5</a>
    </div>
    <div class="navbar-end">
      <a class="navbar-item">Logged in</a>
    </div>
  </div>
</nav>

- sol