折叠侧边栏时 SVG 图标消失

Question

当我折叠侧边栏时，我希望隐藏文本并保持 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

Answer 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;
}