Bootstrap 切换子菜单灵活列故障从行到列上显示

6psbrbz9 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(2)|浏览(112)

我做了一个子菜单，当点击一个按钮时显示在列中。子菜单正在工作，并显示在列，但有一个小故障，显示在行在一秒钟内，然后切换到一列。我的代码中缺少了什么吗？

<div class="container">
<div class="row">
<div class="col-6">
  <div class="card">
    <a class="p-0 text-decoration-none" data-toggle="collapse" href="#sub-menu" role="button">
      <h6 class="card-header"><i class="fa fa-folder mr-2"></i>Open sub-menu</h6>
    </a>
    <div id="sub-menu" class="collapse nav flex-column bg-transparent">
      <a class="nav-link btn btn-light mt-1 mb-1" href="#">First Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Second Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Third Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Forth Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Fifth Link</a>
    </div>
  </div>
</div>

下面是一个小提琴的例子：https://jsfiddle.net/mp9007/4rm0fsvx/5/
谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/60192165/bootstrap-toggle-sub-menu-flex-column-glitch-from-row-to-column-on-show

2条答案

按热度按时间

ftf50wuq1#

只需从#sub-menu div中删除nav类。可能折叠和.nav有样式冲突，因为.nav向元素添加了display: flex。

赞(0）回复(0）举报 2023-06-20

kupeojn62#

将带有nav类的块 Package 在带有collapse类的块中：

<div id="sub-menu" class="collapse">
    <div class="nav flex-column bg-transparent">
        <a class="nav-link btn btn-light mt-1 mb-1" href="#">First Link</a>
        <a class="nav-link btn btn-light mb-1" href="#">Second Link</a>
        <a class="nav-link btn btn-light mb-1" href="#">Third Link</a>
        <a class="nav-link btn btn-light mb-1" href="#">Forth Link</a>
        <a class="nav-link btn btn-light mb-1" href="#">Fifth Link</a>
    </div>
</div>

赞(0）回复(0）举报 2023-06-20

我来回答

Bootstrap 切换子菜单灵活列故障从行到列上显示

2条答案

相关问题

热门标签

最新问答