Twitter bootstrap Bootstrap 5 offcanvas无法处理锚点内的图像或图标

Twitter bootstrap Bootstrap 5 offcanvas无法处理锚点内的图像或图标,twitter-bootstrap,bootstrap-5,off-canvas-menu,twitter-bootstrap-5,Twitter Bootstrap,Bootstrap 5,Off Canvas Menu,Twitter Bootstrap 5,你们可能会认为这是一个重复的问题,但我可以向你们保证,我已经研究了几个关于stakeoverflow的问题,并没有找到类似的问题 我已经在画布上实现了Bootstrap5,它有一个奇怪的问题 当您触发包含文本的按钮(锚定/按钮)时,它可以完美地工作。但是当你把一个图像或者一个图标放进去的时候。它停止工作了 这是我的密码: 我的应用程序的顶部菜单 <div class="w-100 border fixed-top py-2"> <a class="

你们可能会认为这是一个重复的问题,但我可以向你们保证,我已经研究了几个关于stakeoverflow的问题,并没有找到类似的问题

我已经在画布上实现了Bootstrap5,它有一个奇怪的问题

当您触发包含文本的按钮(锚定/按钮)时,它可以完美地工作。但是当你把一个图像或者一个图标放进去的时候。它停止工作了

这是我的密码:

我的应用程序的顶部菜单

<div class="w-100 border fixed-top py-2">
<a class="btn float-start d-inline offcanvas_btn" data-bs-toggle="offcanvas" href="#sidebar_left" role="button" aria-controls="sidebar_left" >
<img src="https://www.bylde.com/assets/img/bylde-logo-small.webp?v=B01234567" class="img-fluid hlogo rounded">
</a>

<a class="btn float-end d-inline" data-bs-toggle="offcanvas" href="#sidebar_right" role="button" aria-controls="sidebar_right">
Menu
</a>

<div class="clearfix"></div>
</div>

这是边栏代码:

<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar_left" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

非画布
一些文本作为占位符。在现实生活中,你可以拥有你选择的元素。例如,文本、图像、列表等。
下拉按钮
根据bootstrap文档()

复制步骤:

  • 使用您的移动设备
  • 参加考试
  • 单击菜单(右上角)
  • 单击左上角的徽标
  • 请参阅差异。

    这是beta-3中的一个问题,将在5.0.0版本中解决

    解决方法是在内部元素上使用
    数据bs toggle=“offcanvas”

      <a class="btn float-start d-inline offcanvas_btn" href="#sidebar_left" role="button" aria-controls="sidebar_left">
          <img src="https://www.bylde.com/assets/img/bylde-logo-small.webp?v=B01234567" style="width: 30px" data-bs-target="#sidebar_left" data-bs-toggle="offcanvas" class="img-fluid hlogo rounded">
      </a>
    
    
    

    我发现另一种非常有效的方法是包含jquery并使用jquery处理触发器。下面是一个工作示例: