折叠侧边栏时 SVG 图标消失

Posted 2023-03-06

【中文标题】折叠侧边栏时 SVG 图标消失

【英文标题】：SVG icon disappears when collapsing a sidebar

【发布时间】：2022-01-19 05:40:03

【问题描述】：

当我折叠侧边栏时，我希望隐藏文本并保持 SVG 可见。

它按预期工作，但由于某种原因，当侧边栏折叠时，“项目”的 SVG 消失（其他 svg 按预期显示）

我尝试过的：

CSS（截断）

添加了在侧边栏折叠时不显示 Projects 文本的规则（不起作用）

#sidebar.active #sidebarProjectsText
    display: none;

向display: block svg 添加了一条规则，当侧边栏处于活动状态或不活动状态（不工作）时

#sidebar #projectsSvg,
#sidebar.active #projectsSvg 
    display: block;

期望的输出：

文字Projects和箭头在折叠时消失 无论侧边栏处于何种状态（活动或非活动），Svg 图像始终可见

LIVE JS FIDDLE

我做错了什么？

更新 Nimeshka Srimal 答案：

我尝试应用 Nimeshka Srimal 的建议，但是当切换侧边栏时，svg 图像变小了。它解决了我的问题，但它创造了一个新问题。

JS FIDDLE with Nimeshka Srimal answer implemented

【参考方案1】：

这是因为您的样式应用于.sidebar-item 类，而您的项目菜单项没有该类。

只需用<div> 或<span> 包装它并添加.sidebar-item 类。

<div class="card-header" id="headingOne">
  <h5 class="mb-0 d-flex flex-nowrap">
    <svg id="projectsSvg" ...></svg>
    <div class="sidebar-item">
      <button
        id="btnProjectsSidebar"
        ...
      >
        <span id="sidebarProjectsText text-nowrap">Projects</span>
        <i id="profile-chevron-down" class="bi bi-chevron-down ml-2"> </i>
      </button>
    </div>
  </h5>
</div>

您可能需要修复其他样式。

回答更新的问题： 为 svg 图标提供固定宽度。

例如：

.sidebar-element svg 
  min-width: 55px;

【讨论】：

谢谢，在接受您的回答之前，我观察到 svg 图像变小了……它可能是什么？

“svg 图像变小”是什么意思？

我编辑了我的问题并添加了一个新的小提琴，以方便您实施您的建议。切换后基本上无缘无故地调整了 svg 图像的大小。

为 svg 元素提供固定宽度来修复它。我已经更新了答案。