如何让Navbar仅占Header宽度的75%？

完全没必要把Navbar做成图片——这会导致导航链接交互复杂、响应式失效，直接用CSS或Bootstrap自带类就能轻松解决，给你几个可行方案：

方案一：直接控制Navbar宽度（推荐） #

利用Bootstrap的宽度类w-75和水平居中类mx-auto，直接给<nav>标签添加这两个类即可：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 w-75 mx-auto">
    <div class="container">
        <img src="~/images/logo.png" width="65" height="55" />
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end">
            <ul class="navbar-nav flex-grow-1 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Kursy</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Pomoc</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Mój profil</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            </form>
        </div>
    </div>
</nav>

w-75让Navbar宽度占父容器（Header）的75%，mx-auto实现水平居中，完全保留Bootstrap的响应式特性。

方案二：自定义CSS控制 #

如果不想依赖Bootstrap的工具类，写一段自定义CSS：

.custom-width-navbar {
    width: 75%;
    margin: 0 auto; /* 水平居中 */
}

然后给<nav>标签添加这个类：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 custom-width-navbar">
    <!-- 内部内容不变 -->
</nav>

方案三：保持Navbar背景全屏，内容区域占75% #

如果希望Navbar的背景还是全屏显示，但内部的导航内容只占75%宽度，修改内部的container为container-fluid w-75：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container-fluid w-75">
        <!-- 内部内容不变 -->
    </div>
</nav>

为什么不推荐做成图片？ #

• 导航链接需要手动添加映射区域，开发和维护成本高
• 图片无法自适应不同屏幕尺寸，响应式效果差
• 文字无法缩放，影响可访问性

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