首页 > 解决方案 > 引导导航栏不适用于 Laravel,只有一部分在工作

问题描述

我从资源/视图/inc -> navbar.blade.php 中的引导程序创建了一个导航栏

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Project</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

第一个 div 标签工作正常,但第二个 div 标签在输出中不可见

我正确地将导航栏包含在资源/视图/布局内的单独文件中-> app.blade.php

<body>
    @include('inc.navbar')
    <div class="container">
        @yield('content')   
    </div>
</body>

请在这件事上给予我帮助

编辑

我删除class="collapse navbar-collapse"了,然后出现导航链接,兼容性有什么问题collapse

标签: phplaravelbootstrap-4navbarlaravel-blade

解决方案


如果您指的是希望此 div 立即可见(无需单击):

<div id="navbar" class="collapse navbar-collapse">...</div>

事实上,它并不意味着在加载时可见。如果你想让它加载,你有一个额外的折叠类,它有效地隐藏了 div,删除它,它应该对你可见:

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

推荐阅读