移动视图中引导程序的导航栏问题答案

【问题标题】：Navbar issue for bootstrap in Mobile View移动视图中引导程序的导航栏问题
【发布时间】：2018-03-13 20:41:57
【问题描述】：

我正在尝试开发一个简单的网站，使用导航栏，希望它对图像是透明的，当您使用 PC 时它会正常，但是当它通过移动访问时，菜单与下面的组件重叠，我该怎么做解决这个问题？

如果我删除了固定顶类，菜单不会随着覆盖图像变得透明

移动视图

这是我的代码：

<div class="container ">
  <a class="navbar-brand" href="/">
    <img class="img-fluid" src="img/logo.png" alt="Logo" title="Logo da Isco Sistemas">
  </a>
  <span class="h4 text-dark" href="#">41. 3156-4726</span>

</div>

【问题讨论】：

阅读responsive Navbar。简单地使用navbar-brand 不是导航栏。

标签： html css bootstrap-4

【解决方案1】：

<div class="container ">  
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="/">
    <img class="img-fluid" src="img/logo.png" alt="Logo" title="Logo da Isco Sistemas">
  </a>
  <span class="h4 text-dark" href="#">41. 3156-4726</span>
  </div>
</nav>

</div>

【讨论】：

Tks，但是如果删除 fixed-top ，我的导航栏不显示 img，但是没关系... tks