如何用Bootstrap5实现导航栏左右边距贴近页面边缘？

问题根源 #

你遇到的偏移问题，核心是Bootstrap默认container类的样式冲突：

• container自带margin: 0 auto（左右自动外边距），会让容器在导航栏内居中，左右产生空白；
• 你手动添加的ms-2/ps-2/me-2/pe-2类，和container的默认内外边距叠加，导致容器位置错乱，出现移除/添加类时的偏移现象。

解决步骤 #

1. 替换容器类：把导航栏内部的container换成container-fluid——这个类会让容器占满导航栏的100%宽度，不会自动居中，天然贴近页面边缘。
2. 清理冗余类：移除ps-2 ms-2 pe-2 me-2这些冲突的内外边距类，如需保留少量边距，用px-*类统一控制左右内边距（比如px-2对应0.5rem的边距）。

修改后的完整导航栏代码 #

<nav class="navbar navbar-expand bg-dark navbar-dark py-0 sticky-top">
    <div class="container-fluid px-2">
        <a href="/" style="color: #9a9d9e">
            <img alt="tz" src="{% static 'main/img/favicon.ico' %}"
                 width="33" height="33" class="navbar-brand">
            TrapEEzEE
        </a>
        <button 
            class="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navmenu"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
     
        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a href="#More" class="nav-link">More</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

额外说明 #

• 如果想要内容完全贴紧页面边缘，把px-2换成px-0即可；
• container-fluid的默认内边距是为了适配移动端触摸区域，保留少量边距会提升用户体验；
• 导航栏的sticky-top和其他样式不受影响，依然可以正常使用。

内容的提问来源于stack exchange，提问作者Fred