布尔玛 CSS 汉堡按钮位置坏了？答案

【问题标题】：Bulma CSS burger button position broken?布尔玛 CSS 汉堡按钮位置坏了？
【发布时间】：2020-05-25 18:46:10
【问题描述】：

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

我希望它位于最右侧并与徽标垂直对齐。但汉堡就在标志旁边，也略低一些。我试过“位置：绝对；对：0；”但它一直在往回跳。

Bulma 不适合与 Blaze 和 Meteor 一起使用吗？到目前为止，我没有其他 CSS 文件，只是在标题标签中添加了 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>

【问题讨论】：

Blaze 本身没有 css 问题，因为它只渲染/更新 DOM 元素，因此任何 CSS 框架都可以使用它。

标签： css bulma

【解决方案1】：

您需要像这样将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：

【讨论】：

耶稣，你是对的。另外，我的项目中还有 twbs:boostrap 包，这也破坏了 Bulma。