无法复制启动侧边栏箭头

huangapple
go评论133阅读模式
英文:

Cannot replicate bootstrap sidebar arrow

问题

I am trying to create the 4th sidebar (from the left) using these Bootstrap 5 examples.

我正在尝试创建左侧第4个边栏，使用这些Bootstrap 5示例。

I am able to get everything except the arrow rotating when aria-expanded=true. I've tried different selectors, changing the aria labels but cannot get the arrow to rotate on expand.

除了在aria-expanded=true时旋转箭头之外，我能够获得一切。我尝试了不同的选择器，更改了aria标签，但不能使箭头在展开时旋转。

The snippet is as follows:

下面是代码片段：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. .btn-toggle-nav a {
  5.   display: inline-flex;
  6.   padding: 0.1875rem 0.5rem;
  7.   margin-top: 0.125rem;
  8.   margin-left: 1.25rem;
  9.   text-decoration: none;
  10. }
  12. .btn-toggle[aria-expanded="true"]::before {
  13.     transform: rotate(90deg);
  14. }
  16. .btn-toggle::before {
  17.   width: 1.25em;
  18.   line-height: 0;
  19.   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  20.   transition: transform .35s ease;
  21.   transform-origin: 0.5em 50%;
  22. }
  24. <!-- language: lang-html -->
  25. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  26. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  27. <div class="col-3">
  28.   <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
  29.     <span class="fs-5 fw-semibold">Collapsible</span>
  30.   </a>
  31.   <ul class="list-unstyled ps-0">
  32.     <li class="mb-1">
  33.       <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
  34.         Home
  35.       </button>
  36.       <div class="collapse" id="home-collapse">
  37.         <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
  38.           <li><a href="#" class="link-dark rounded">Overview</a></li>
  39.           <li><a href="#" class="link-dark rounded">Updates</a></li>
  40.           <li><a href="#" class="link-dark rounded">Reports</a></li>
  41.         </ul>
  42.       </div>
  43.     </li>
  44.     <li class="mb-1">
  45.       <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
  46.         Dashboard
  47.       </button>
  48.       <div class="collapse" id="dashboard-collapse">
  49.         <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
  50.           <li><a href="#" class="link-dark rounded">Overview</a></li>
  51.           <li><a href="#" class="link-dark rounded">Weekly</a></li>
  52.           <li><a href="#" class="link-dark rounded">Monthly</a></li>
  53.           <li><a href="#" class="link-dark rounded">Annually</a></li>
  54.         </ul>
  55.       </div>
  56.     </li>
  57.     <li class="border-top my-3"></li>
  58.     <li class="mb-1">
  59.       <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
  60.         Account
  61.       </button>
  62.       <div class="collapse" id="account-collapse" style="">
  63.         <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
  64.           <li><a href="#" class="link-dark rounded">New...</a></li>
  65.           <li><a href="#" class="link-dark rounded">Profile</a></li>
  66.           <li><a href="#" class="link-dark rounded">Settings</a></li>
  67.           <li><a href="#" class="link-dark rounded">Sign out</a></li>
  68.         </ul>
  69.       </div>
  70.     </li>
  71.   </ul>
  72. </div>
  74. <!-- end snippet -->
英文:

I am trying to create the 4th sidebar (from the left) using these Bootstrap 5 examples.

I am able to get everything except the arrow rotating when aria-expanded=true. I've tried different selectors, changing the aria labels but cannot get the arrow to rotate on expand.

The snippet is as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .btn-toggle-nav a {
  2. display: inline-flex;
  3. padding: 0.1875rem 0.5rem;
  4. margin-top: 0.125rem;
  5. margin-left: 1.25rem;
  6. text-decoration: none;
  7. }
  8. .btn-toggle[aria-expanded=&quot;true&quot;]::before {
  9. transform: rotate(90deg);
  10. }
  11. .btn-toggle::before {
  12. width: 1.25em;
  13. line-height: 0;
  14. content: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;16&#39; height=&#39;16&#39; viewBox=&#39;0 0 16 16&#39;%3e%3cpath fill=&#39;none&#39; stroke=&#39;rgba%280,0,0,.5%29&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;M5 14l6-6-6-6&#39;/%3e%3c/svg%3e&quot;);
  15. transition: transform .35s ease;
  16. transform-origin: 0.5em 50%;
  17. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&quot;col-3&quot;&gt;
  4. &lt;a href=&quot;/&quot; class=&quot;d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom&quot;&gt;
  5. &lt;span class=&quot;fs-5 fw-semibold&quot;&gt;Collapsible&lt;/span&gt;
  6. &lt;/a&gt;
  7. &lt;ul class=&quot;list-unstyled ps-0&quot;&gt;
  8. &lt;li class=&quot;mb-1&quot;&gt;
  9. &lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#home-collapse&quot; aria-expanded=&quot;false&quot;&gt;
  10. Home
  11. &lt;/button&gt;
  12. &lt;div class=&quot;collapse&quot; id=&quot;home-collapse&quot;&gt;
  13. &lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
  14. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Overview&lt;/a&gt;&lt;/li&gt;
  15. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Updates&lt;/a&gt;&lt;/li&gt;
  16. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Reports&lt;/a&gt;&lt;/li&gt;
  17. &lt;/ul&gt;
  18. &lt;/div&gt;
  19. &lt;/li&gt;
  20. &lt;li class=&quot;mb-1&quot;&gt;
  21. &lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#dashboard-collapse&quot; aria-expanded=&quot;false&quot;&gt;
  22. Dashboard
  23. &lt;/button&gt;
  24. &lt;div class=&quot;collapse&quot; id=&quot;dashboard-collapse&quot;&gt;
  25. &lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
  26. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Overview&lt;/a&gt;&lt;/li&gt;
  27. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Weekly&lt;/a&gt;&lt;/li&gt;
  28. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Monthly&lt;/a&gt;&lt;/li&gt;
  29. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Annually&lt;/a&gt;&lt;/li&gt;
  30. &lt;/ul&gt;
  31. &lt;/div&gt;
  32. &lt;/li&gt;
  33. &lt;li class=&quot;border-top my-3&quot;&gt;&lt;/li&gt;
  34. &lt;li class=&quot;mb-1&quot;&gt;
  35. &lt;button class=&quot;btn btn-toggle align-items-center rounded collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#account-collapse&quot; aria-expanded=&quot;false&quot;&gt;
  36. Account
  37. &lt;/button&gt;
  38. &lt;div class=&quot;collapse&quot; id=&quot;account-collapse&quot; style=&quot;&quot;&gt;
  39. &lt;ul class=&quot;btn-toggle-nav list-unstyled fw-normal pb-1 small&quot;&gt;
  40. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;New...&lt;/a&gt;&lt;/li&gt;
  41. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  42. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  43. &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link-dark rounded&quot;&gt;Sign out&lt;/a&gt;&lt;/li&gt;
  44. &lt;/ul&gt;
  45. &lt;/div&gt;
  46. &lt;/li&gt;
  47. &lt;/ul&gt;
  48. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你的 ::before 伪元素以 inline 方式显示。添加 display: inline-block 属性：

  1. .btn-toggle::before {
  2.   width: 1.25em;
  3.   line-height: 0;
  4.   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  5.   transition: transform .35s ease;
  6.   transform-origin: 0.5em 50%;
  7.   display: inline-block;
  8. }
英文:

Your ::before pseudoelement is displayed inline. Add display: inline-block property:

  1. .btn-toggle::before {
  2. width: 1.25em;
  3. line-height: 0;
  4. content: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;16&#39; height=&#39;16&#39; viewBox=&#39;0 0 16 16&#39;%3e%3cpath fill=&#39;none&#39; stroke=&#39;rgba%280,0,0,.5%29&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;M5 14l6-6-6-6&#39;/%3e%3c/svg%3e&quot;);
  5. transition: transform .35s ease;
  6. transform-origin: 0.5em 50%;
  7. display: inline-block;
  8. }

huangapple
  • 本文由 发表于 2023年6月9日 07:33:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76436322.html
  • bootstrap-5
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定