按钮菜单在未点击的情况下展开

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

Button menu expanded without clicking

问题

Bootstrap 5的按钮是默认扩展的，甚至不会折叠，这是代码部分：

<nav id="header-nav" class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand" href="index.html"> <h1>Food,LLC</h1></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse d-block d-sm-none" id="navbarSupportedContent">
            <ul id="nav-list" class="nav navbar-nav navbar-right d-block d-sm-none">
                <li class="li-Menu text-center d-sm-none">Chiken</li><hr class="d-sm-none">
                <li class="li-Menu text-center d-sm-none">Beef</li><hr class="d-sm-none">
                <li class="li-Menu text-center d-sm-none">Sushi</li>
            </ul>
        </div>
    </div>
</nav>

我尝试更改这些类 //data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"// 但没有成功。

英文:

Bootstrap 5 button is extend on default and doesn't even collapse this is the cod
//

&lt;nav id=&quot;header-nav&quot; class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt; &lt;h1&gt;Food,LLC&lt;/h1&gt;&lt;/a&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse d-block d-sm-none&quot; id=&quot;navbarSupportedContent&quot;&gt;
            &lt;ul id=&quot;nav-list&quot; class=&quot;nav navbar-nav navbar-right&quot; class=&quot;d-block d-sm-none&quot;&gt;
                &lt;li class=&quot;li-Menu text-center d-sm-none&quot;&gt;Chiken&lt;/li &gt;&lt;hr class=&quot;d-sm-none&quot;&gt;
                &lt;li class=&quot;li-Menu text-center d-sm-none&quot;&gt;Beef&lt;/li&gt;&lt;hr class=&quot;d-sm-none&quot;&gt;
                &lt;li class=&quot;li-Menu text-center d-sm-none&quot;&gt;Sushi&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;

I tried changing this classes //data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"//
But no luck

答案1

得分: 2

从.navbar-collapse元素中删除类d-block d-sm-none。

英文:

Remove the classes d-block d-sm-none from the .navbar-collapse element.

huangapple
  • 本文由 发表于 2023年7月11日 05:47:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76657532.html
  • bootstrap-5
  • css
  • html
  • javascript
  • visual-web-developer-2010
匿名

发表评论

匿名网友

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

确定