html - 如何使 NAV 与悬停内联

标签 html css bootstrap-4

我正在尝试让这个 HTML 导航栏以内嵌方式显示并具有悬停效果,有没有办法做到这一点?

这是我的HTML

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-brand" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-brand" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

最佳答案

如果您想要引导解决方案,请尝试 navbar-link。这是 documentation

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-link" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-link" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

关于html - 如何使 NAV 与悬停内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48269559/

相关文章:

html - Bootstrap 导航栏 Logo 高度和菜单分隔线

javascript - 为什么总是重画整个 Canvas ?

html - radio 输入样式不适用于 Firefox

html - 我的 CSS 代码布局有问题

css - 定位第 n 列(由列数构成)

css - 如何将一个 div 粘贴到另一个 div 的底部?

javascript - 如何使用 Angular 下拉列表中的选定值填充数组?

javascript - 支持土耳其语输入的文本框

css - 如何使用 CSS flexbox 在 Bootstrap 4 下拉项中将图标右对齐

node.js - 从控制台上显示的后端进行输入验证,但在前端React上不显示,nodejs Bootstrap