Prerequisites
Describe the issue
After the fix in PR #42814 , I tested it and found the following new issues.
When only the icon is kept, the icon does not seem to be perfectly vertically centered; the space above it feels larger than the space below it.
Expected behavior: When only the icon button is kept, the icon should be perfectly vertically centered.
When the page is refreshed while already in the collapsed state, there is a flicker.
Steps to reproduce: Press F12, open the console, press Ctrl + Shift + M, reduce the width, and press F5 to refresh the page.
QQ20260817-005926.mp4
The flickering even triggered the scrollbar:
When I add the following styles, the scrollbar no longer appears:
< style >
.nav-overflow {
overflow : hidden;
}
</ style >
QQ20260817-011249.mp4
Although the scrollbar no longer appears, the flickering issue still persists.
Reduced test cases
Reproduction code:
<!doctype html>
< html lang ="zh ">
< head >
< meta charset ="UTF-8 " />
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
< title > Document</ title >
< link
rel ="stylesheet "
href ="https://cdn.jsdelivr.net/npm/[email protected] /font/bootstrap-icons.min.css "
/>
< link
rel ="stylesheet "
href ="https://cdn.jsdelivr.net/gh/twbs/bootstrap@4bacc48b71e786292d980ab6214ac93a450dfb05/dist/css/bootstrap.min.css "
/>
</ head >
< body class ="p-2 ">
< div class ="container ">
< div class ="nav-overflow ">
< ul class ="nav nav-pills ">
< li class ="nav-item ">
< a class ="nav-link active " aria-current ="page " href ="# "> Home</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Dashboard</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Products</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Services</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Analytics</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Reports</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Settings</ a >
</ li >
< li class ="nav-item ">
< a class ="nav-link " href ="# "> Help</ a >
</ li >
</ ul >
</ div >
</ div >
< script type ="module ">
import { NavOverflow } from "https://cdn.jsdelivr.net/gh/twbs/bootstrap@4bacc48b71e786292d980ab6214ac93a450dfb05/dist/js/bootstrap.bundle.min.js" ;
const navElement = document . querySelector ( ".nav-overflow" ) ;
const navOverflow = new NavOverflow ( navElement , {
collapseBelow : "md" ,
moreText : false ,
threshold : 2 ,
moreIcon : `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>
` ,
} ) ;
</ script >
</ body >
</ html > 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?
v6-dev
Prerequisites
Describe the issue
After the fix in PR #42814, I tested it and found the following new issues.
Expected behavior: When only the icon button is kept, the icon should be perfectly vertically centered.
Steps to reproduce: Press F12, open the console, press Ctrl + Shift + M, reduce the width, and press F5 to refresh the page.
QQ20260817-005926.mp4
The flickering even triggered the scrollbar:
When I add the following styles, the scrollbar no longer appears:
QQ20260817-011249.mp4
Although the scrollbar no longer appears, the flickering issue still persists.
Reduced test cases
Reproduction code:
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?
v6-dev