Bootstrap 4.5导航栏不展开可折叠项

huangapple
go评论65阅读模式
英文:

Bootstrap 4.5 Navbar is not expanding for Collapsible items

问题

我的应用程序是基于Bootstrap 4.5构建的，使用Bootstrap建议的导航栏折叠项方法，图标可见但项目缺失。我有一个-navbar.scss文件，其中定义了所有属性。

我的HTML代码。

<nav class="navbar navbar-expand-md fixed-bottom bg-gray navbar-light justify-content-end">
    <!-- 切换/折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 导航栏链接 -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="light.html">Lights</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="light.html">Lights</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Shades.html">Shades</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Climtes.html">Climates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Settings.html">Settings</a>
            </li>
        </ul>
    </div>
</nav>

截图:-
点击此处查看图片描述
点击此处查看图片描述

英文:

My application is build on Bootstrap 4.5 & using the bootstrap suggested method for Navbar collapse items, the icon is visible but items are missing. I have -navbar.scss which all the properties defined.

My HTML code.

<nav class="navbar navbar-expand-md fixed-bottom bg-gray navbar-light justify-content-end"&gt;

    &lt;!-- Toggler/collapsibe Button --&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapsibleNavbar&quot;&gt;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    

    &lt;!-- Navbar links --&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;collapsibleNavbar&quot;&gt;
      &lt;ul class=&quot;navbar-nav&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;light.html&quot;&gt;Lights&lt;/a&gt;
          &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;light.html&quot;&gt;Lights&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;Shades.html&quot;&gt;Shades&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;Climtes.html&quot;&gt;Climates&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;Settings.html&quot;&gt;Settings&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;

Screenshots:-
enter image description here
enter image description here

答案1

得分: 0

上面的代码在您正确将Bootstrap 4添加到项目中时可以正常工作。请查看下面的代码片段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="light.html">Lights</a>
      </li>
      <li class="nav-item">
        <a class "nav-link" href="light.html">Lights</a>
      </li>
      <li class="nav-item">
        <a class "nav-link" href="Shades.html">Shades</a>
      </li>
      <li class="nav-item">
        <a class "nav-link" href="Climates.html">Climates</a>
      </li>
      <li class="nav-item">
        <a class "nav-link" href="Settings.html">Settings</a>
      </li>
    </ul>
  </div>
</nav>

希望对您有所帮助。

英文:

The code above works as expected if you add Bootstrap 4 to your project correctly.

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
&lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapsibleNavbar&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;collapsibleNavbar&quot;&gt;
&lt;ul class=&quot;navbar-nav&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;light.html&quot;&gt;Lights&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;light.html&quot;&gt;Lights&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;Shades.html&quot;&gt;Shades&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;Climtes.html&quot;&gt;Climates&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;Settings.html&quot;&gt;Settings&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 19:38:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/75471726.html
  • bootstrap-4
  • expandablelistview
  • navbar
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定