css - Bulma 导航栏有两行

Question

在 bulma.io 中重现这一点的最佳方法是什么？包括responsivness, hamburger等

<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。直到我想做一些与众不同的事情之前，这真是令人愉快的经历。在我的例子中，它是两行导航栏。经过一个小时的尝试后，我迅速切换回 Bs3。

使用 bootstrap 的主要优势在于，成千上万想要实现各种疯狂的怪人已经提出了数十个愚蠢的问题。他们中的大多数都得到了患者社区的回答，现在向公众开放。不幸的是， bool 玛还没有真正做到这一点。

我觉得现在至少有 70% 的程序员都打算用 google 搜索 stackoverflow。快速研究主题的能力是必不可少的。我没有时间为自己探索一切，我要养家糊口，而我的客户根本不在乎我使用哪种框架。但至少我决定问。可能有人将来会面临类似的挑战。干杯。

Answer 1

可能有很多方法可以做到这一点。这是一种方法:

按照 documentation 中的说明创建您的菜单然后……

HTML

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

CSS

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

fiddle

.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>