Question

使用bulma，可以为网站设置品牌徽标。但是，该品牌在浏览器中的显示方式有所不同。所讨论的图像尺寸为640x160，故障分别在Mozilla Firefox和Google Chrome上显示如下。徽标图像在chrome上垂直拉伸，因此看起来很难看。

我检查了DOM，发现禁用.navbar-brand（display: flex）上的规则可以纠正品牌大小，但是它具有其他效果，例如在移动版本.navbar-burguer中在另一行上（由于显示为block），在Moz Firefox上，navbar-menu中显示的链接消失了。是什么原因导致navbar-brand上出现这种奇怪的行为？

修改

我为HTML页面使用了静态生成器，因此您应该看到导航栏的一些液态代码，其编写方式如下：

<nav class="navbar is-spaced has-text-weight-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <img class="navbar-item" src="/assets/img/logos/direc.png" width="164" height="41">

      <a role="button" class="navbar-burger" data-target="nav-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <ul id="nav-menu" class="navbar-menu">
      {% for link in site.navigation %}
      <li><a href="{{ link.url }}" class="navbar-item">{{ link.text }}</a></li>
      {% endfor %}

      <div class="navbar-end">
        <li><a href="/login.html" class="button is-info">LOGIN</a></li>
      </div>
    </ul>
  </div>
</nav>

Answer 1

图片必须通过超链接 包围。

<a class="navbar-item" href="#">
   <img class="navbar-item" src="..." width="164" height="41">
</a>

布尔玛导航栏的结构为：

<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 role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">...</div>
    <div class="navbar-end">...</div>
  </div>
</nav>

总计

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">

<nav class="navbar is-spaced has-text-weight-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img class="navbar-item" src="http://via.placeholder.com/160/640" width="164" height="41">
      </a>

      <a role="button" class="navbar-burger" data-target="nav-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="nav-menu" class="navbar-menu">
      <div class="navbar-start">
        <ul>
          {% for link in site.navigation %}
          <li><a href="{{ link.url }}" class="navbar-item">{{ link.text }}</a></li>
          {% endfor %}
        </ul>
      </div>

      <div class="navbar-end">
        <a class="navbar-item" href="/login.html" class="button is-info">LOGIN</a>
      </div>
    </div>
  </div>
</nav>

Navbar品牌在bulma上延伸

1 个答案:

总计