ASP.NET站点Bootstrap开发中窗口缩小时主内容区无法居中问题

问题概述 #

为现有ASP.NET站点开发的配套Bootstrap适配包装层已覆盖绝大多数功能，整体运行正常，仅存在一处响应式表现异常：

• 浏览器窗口宽度收窄时，主面板内的内容无法正常居中
• 页头、页脚的响应式适配、居中表现完全符合预期
• 已准备可复现的演示示例，用于精准定位问题根源

现有代码实现细节 #

整套Bootstrap适配规则全部配置在站点母版页上，并未直接应用在各个独立的内容页面。

页头部分实现 #

页头外层div配置的类属性为：d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top
其内部嵌套UpdatePanel与ContentTemplate，承载了整套Bootstrap navbar导航的页面标记。

主内容面板实现 #

主内容区域的标记结构如下：

<div class="container d-flex justify-content-center flex-md-rows align-items-center">
    <!-- 无论是否给容器添加d-flex相关类，当前居中异常的表现都完全一致 -->
    <div id="content" class="row" style="margin-left: auto; margin-right: auto;">
        <div id="divContMain" runat="server" style="width: auto;">
            <asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <center>
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

约束条件与已尝试的调整 #

• 外层容器divContMain必须保留runat="server"服务器端运行属性，因为主内容区的侧边栏需要根据当前访问的页面动态判断是否展示；默认状态下divContMain会挂载col-12类
• 为尝试修复居中问题，曾将外层container替换为container-fluid，同时将divContMain的宽度从auto调整为继承父级宽度
• 调整后的实际效果：中等窗口尺寸下的内容居中表现有所改善，但当窗口收窄到移动设备尺寸范围时，居中效果仍会完全失效

目前已接近定位到问题根源，希望获取对应的可落地修复方案。

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