Bulma CSS 汉堡按钮位置坏了？

Question

我正在使用 Meteor + Blaze + Bulma 实现一个网站。我基本上已经创建了一个导航菜单，并让汉堡按钮适用于小型设备。但问题是，汉堡按钮的位置搞砸了。

我希望它位于最右侧并与徽标垂直对齐。但是汉堡就在标志旁边，也稍微低一点。我试过 "position: absolute; right:0;" 但它一直跳回去。

Bulma 不适合与 Blaze 和 Meteor 一起使用吗？到目前为止，我没有其他 CSS 文件，只是在 header 标签中添加了 Bulma。那么可能是什么问题？

<template name="navigation">
   <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
       <div class="container">
           <!-- Logo/Home -->
           <div class="navbar-brand">
               <a class="" href="{{pathFor route='Home'}}">
                    <img src="logo.svg" width="200" height="29" />
               </a>

           <!-- Burger Menu Button -->
           <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
           </a>
        </div>

        <!-- Navigation Conent -->
        <div id="navlist" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="{{pathFor route='1'}}">
                1
                </a>
                <a class="navbar-item" href="{{pathFor route='2'}}">
                2
                </a>
                <a class="navbar-item" href="{{pathFor route='3'}}">
                3
                </a>
                <a class="navbar-item" href="{{pathFor route='4'}}">
                4
                </a>
                <a class="navbar-item" href="{{pathFor route='5'}}">
                5
                </a>
            </div>

            <!-- Navbar social -->
            <div class="navbar-end">
                <a class="navbar-item icon is-large" href="https://www.meetup.com/...">
                    <i class="fab fa-lg fa-meetup"></i>
                </a>
                <a class="navbar-item icon is-large" href="https://www.facebook.com/...">
                    <i class="fab fa-lg fa-facebook"></i>
                </a>
                <a class="navbar-item icon is-large" href="https://www.youtube.com/...">
                    <i class="fab fa-lg fa-youtube"></i>
                </a>
            </div>
        </div>
    </div>
</nav>

Answer 1

您需要像这样将 class navbar-item 添加到徽标的容器中：

<div class="navbar-brand">
    <a class="navbar-item" href="{{pathFor route='Home'}}">  <!-- Adding the class navbar-item -->
        <img src="logo.svg" width="200" height="29" />
    </a>

    <!-- Burger Menu Button -->
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
    </a>
</div>

我自己项目的结果：

没有 navbar-item :

与navbar-item:

Bulma CSS 汉堡按钮位置坏了？

Bulma CSS burger button position broken?

css

bulma