ASP.NET WebForms中如何让内容页与静态侧边栏菜单并排显示

针对你的ASP.NET WebForms母版页布局问题，核心是要把侧边栏和内容占位符放在同一个布局容器中，利用Bootstrap的Flex或Grid系统实现横向排列。以下是两种可行的调整方案：

方案一：使用Bootstrap Flex布局 #

修改母版页中header之后的代码，将侧边栏和内容占位符包裹在d-flex容器内：

<!-- 主体布局容器 -->
<div class="d-flex">
    <!-- 静态侧边栏：固定宽度，不被压缩 -->
    <main class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
            <svg class="bi pe-none me-2" width="30" height="24">
                <use xlink:href="#bootstrap" />
            </svg>
            <span class="fs-5 fw-semibold">Collapsible</span>
        </a>
        <ul class="list-unstyled ps-0">
            <li class="mb-1">
                <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
                    Home
                </button>
                <div class="collapse show" id="home-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
                    Dashboard
                </button>
                <div class="collapse" id="dashboard-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
                    Orders
                </button>
                <div class="collapse" id="orders-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
                    </ul>
                </div>
            </li>
            <li class="border-top my-3"></li>
            <li class="mb-1">
                <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
                    Account
                </button>
                <div class="collapse" id="account-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New...</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li>
                        <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Sign out</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </main>

    <!-- 内容页占位符：自动填充剩余宽度 -->
    <div class="flex-grow-1 p-3">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</div>

关键说明： #

• d-flex：将容器设置为Flex布局，子元素默认横向排列
• flex-shrink-0：防止侧边栏被内容区挤压缩小
• flex-grow-1：让内容占位符占据容器剩余的所有宽度

方案二：使用Bootstrap Grid布局（响应式友好） #

如果需要适配移动端，推荐用Grid系统，小屏幕下侧边栏自动切换到顶部：

<!-- 主体布局容器：去掉列间距 -->
<div class="row g-0">
    <!-- 侧边栏：中等屏幕及以上占3列，小屏幕占全屏 -->
    <main class="col-md-3 p-3 bg-white">
        <!-- 侧边栏内容同方案一 -->
    </main>

    <!-- 内容页占位符：中等屏幕及以上占9列，小屏幕占全屏 -->
    <div class="col-md-9 p-3">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</div>

关键说明： #

• row g-0：移除列之间的默认间距，避免多余空白
• col-md-3/col-md-9：实现响应式布局，屏幕宽度≥768px时侧边栏占1/4宽度，内容区占3/4；小屏幕下两者都占100%宽度，自动垂直排列

额外注意事项： #

1. 确保母版页已正确引入Bootstrap的CSS和JS文件（如果使用侧边栏的折叠功能，必须引入Bootstrap JS）
2. 检查内容页的自定义CSS，若存在position: absolute或float属性，可能导致布局冲突，需移除或调整
3. 可根据需求修改侧边栏的宽度、背景色等样式，避免与内容区视觉冲突

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