html - 两个链接不显示

标签 html css twitter-bootstrap

我在页眉组件中键入了 2 个链接,但这些链接没有显示。这很奇怪,因为一切似乎都很好。这 2 个链接在 ul 列表中。

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
    <a class="navbar-brand" href="#">Ürün Listesi</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Ürün İşlemleri</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ürün Çıkışı</a>
        </li>
      </ul>
    </div>
  </nav

最佳答案

您的问题出在您包含的 div 上:

<div class="collapse navbar-collapse" id="navbarSupportedContent">

collapse 类将隐藏您的 div,因为它添加了样式 display: none(如果 .show未添加),您需要删除它才能看到您的链接:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #563F7A">
  <a class="navbar-brand" href="#">Ürün Listesi</a>
  <div class="navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Ürün İşlemleri</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ürün Çıkışı</a>
      </li>
    </ul>
  </div>
</nav>

关于html - 两个链接不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57093769/

相关文章:

javascript - 幻灯片与图库导航冲突

php - stackoverflow.com、airbnb.com、google+、facebook.com 等开发中使用的工具?

html - 将div拉伸(stretch)成固定宽度的div

javascript - 将蓝线更新为白色

jquery - 如何创建垂直时间轴

css - 如何更改 Bootstrap 3 中导航栏的颜色?

html - 为什么在这个特定示例中,子元素在最大宽度为 : 100%? 时会拉伸(stretch)到其父元素之外

javascript - 浏览器支持的所有 HTML 标签

html - 为什么位置绝对div的底部有几个像素的空白边距

javascript - 选中所有复选框时取消选中复选框