navbar - Pills with dropdowns - dividers have inconsistent thickness if multiple dividers are present

[igorwolford]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When multiple dividers are used in navbar pill dropdowns, first divider is 3px thick, the rest are 2px. Inconsistent styling.

screenshot

Reduced test cases

Code taken right out of code samples, added additional dividers
https://getbootstrap.com/docs/5.0/components/navs-tabs/#pills-with-dropdowns

https://codepen.io/iwolford/pen/XWeVwNr

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v.5.0

[folknor]

Hi! Do you mind dragging and dropping the screenshot directly into the github comment text box? imgur is blocked on my network, and even if it wasn't I don't trust them. Thank you!

EDIT: Also, you can paste code in github comments https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting

[igorwolford]

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <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>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li> 
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

[florianlacreuse]

On my side it only happens when the page is zoomed in. What is your zoom level? 100%?

[florianlacreuse]

May be related to #34374.

[igorwolford]

I confirm my display settings are at 125% Scale (recommended and default setting on my Windows laptop). So it does look like a duplicate of the one you posted above. Thank you!

[mdo]

Duplicate of #34374 indeed. Closing for that issue :). Will be shipping a fix in v5.2.0.