如何在小屏幕上动态调整C#项目中_layout.cshtml的Navbar宽度

问题场景 #

大屏设备上表格显示正常；但笔记本这类小屏幕设备中，容器出现横向滚动条，滚动后导航栏无法铺满整个页面宽度，布局显示不完整。

现有代码 #

_layout.cshtml #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Device_Migration_Admin_Portal</title>
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="icon" href="~/wdfavicon.ico" type="image/x-icon"> <!-- Add this line to set the favicon -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .header-logo-container {
            text-align:left;
            margin-bottom: 5px;
            margin-top: 0px;
        }
    </style>

</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-black border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <!-- Added container-fluid class -->
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
                    <img src="/images/ New-logo.png" alt="Logo" style="height:45px;margin-right: 10px;">
Admin Portal
                </a>
                <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-between align-items-center">
                    <ul class="navbar-nav flex-grow-1 justify-content-center">
                        <!--<li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Graph</a>
                        </li>-->
                    </ul>
                    
                    <ul class="navbar-nav">
                        @if (User.Identity.IsAuthenticated)
                        {
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    @User.Identity.Name
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <!--<li><a class="dropdown-item" href="#">Profile</a></li>
                                    <li><hr class="dropdown-divider"></li>-->
                                    <li><a class="dropdown-item" asp-area="" asp-controller="Account" asp-action="SignOut">Logout</a></li>
                                </ul>
                            </li>
                        }
                        else
                        {
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>
                            </li>
                        }
                    </ul>
                    <!--<img src="/images/WD-New-logo.png" alt="Logo" style="height: 40px;margin-right: 10px;">-->
                </div>
            </div>
        </nav>
    </header>
    <!--<div class="header-logo-container">
        <img src="/images/Western-Digital-logo.png" alt="Logo" style="height: 50px;">
    </div>-->

    <div class="container">
        <main role="main">
            @RenderBody()
        </main>
    </div>

    @RenderSection("Scripts", required: false)
</body>
</html>

_Layout.cshtml.css #

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a {
  color: #0077cc;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

index.cshtml 自定义样式 #

/* Add custom styles for the container */
.container {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Space between the two containers */
    padding: 20px; /* Added padding to increase container size */
    margin: 0 auto; /* Center the container horizontally */
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
}

/* Style for filter and export dropdown */
.dropdown {
    margin-left: 10px; /* Add spacing between filter and dropdown */
}

/* Add custom styles for the table */
.dataTables_filter {
    display: none;
}

.table-container {
    margin-top: 20px;
    overflow-x: auto; /* Enable horizontal scrolling if necessary */
    display: flex;
    justify-content: center; /* Center the table horizontally */
    width: 100%; /* Ensure the container spans the full width */
}

.table {
    min-width: 1500px; /* Set a minimum width to prevent column overlap */
    table-layout: fixed;
    width: 100%; /* Ensure the table spans the full width of the container */
}

修复方案 #

问题根源：表格设置了min-width:1500px，导致页面整体宽度超过小屏幕视口，但Navbar默认仅适配视口宽度，滚动后无法延伸到页面实际宽度。

方法1：让Navbar跟随表格最小宽度 #

在_layout.cshtml的<style>标签中添加以下CSS：

nav.navbar {
    width: 100%;
    min-width: 1500px; /* 和表格的min-width保持一致 */
}

方法2：设置页面最小宽度（更推荐） #

直接给body设置最小宽度，确保整个页面的宽度下限和表格匹配，Navbar会自动铺满：

body {
    min-width: 1500px;
}

可选优化：调整容器样式 #

index.cshtml中的.container可以修改为：

.container {
    padding: 20px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box; /* 避免padding额外撑开容器宽度 */
}

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