gpt4 book ai didi

twitter-bootstrap - Bootstrap 5 offcanvas 不适用于 anchor 内的图像或图标

转载 作者:行者123 更新时间:2023-12-04 07:46:57 25 4
gpt4 key购买 nike

您可能会认为它是重复的,但让我向您保证,我已经调查了几个关于 stakeoverflow 的问题,但没有找到类似的问题。

我已经实现了 Bootstrap 5 offcanvas,但它有一个奇怪的问题。

当您触发其中包含文本的按钮( anchor /按钮)时,它会完美运行。但是当你在其中放入图像或图标 svg 时。它停止工作。

这是我的代码:

我的应用程序的顶部菜单

<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 文档 (offcanvas) 非常简单直接的实现

复制步骤:

  1. 使用您的移动设备
  2. 去测试URL
  3. 点击菜单(右上角)
  4. 点击左上角的标志

看看区别。

最佳答案

这是 beta-3 中的一个 known issue,将在 5.0.0 版本中解决。

解决方法是在内部元素上使用 data-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>

Demo

关于twitter-bootstrap - Bootstrap 5 offcanvas 不适用于 anchor 内的图像或图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67160462/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com