Odoo网站模板头部添加Bootstrap切换开关后平板端头部消失问题

我想在Odoo模板的头部添加一个Bootstrap切换开关，使用了以下代码：

<div class="custom-control custom-switch">  
  <input type="checkbox" class="custom-control-input" id="customSwitch1">  
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

该代码在笔记本电脑上显示正常，但在平板设备（三星Galaxy TAB lite安卓4.4.4系统的Google Chrome浏览器、iPad）上头部会消失。我没有使用任何自定义CSS，更换其他切换开关代码后问题依旧。完整的头部代码如下：

<div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">                    
    <t t-call="website.navbar_nav">
        <t t-set="_nav_class" t-valuef="flex-grow-1"/>
        <!-- Menu -->
        <t t-foreach="website.menu_id.child_id" t-as="submenu">
            <t t-call="website.submenu">
                <t t-set="item_class" t-valuef="nav-item"/>
                <t t-set="link_class" t-valuef="nav-link"/>
            </t>
        </t>
        <!--Toggle Swith-->
        <span style="margin-top: -15px; margin-left: 10px" >
            <center>
                <b>Prix</b>
            </center>
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="customSwitch1"/>
                <label id="custom-switch-on-off" class="custom-control-label" for="customSwitch1"></label>
            </div>
        </span>
        <!-- Sign In -->
        <t t-call="portal.placeholder_user_sign_in">
            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
            <t t-set="_link_class" t-valuef="nav-link"/>
        </t>
        <!-- User Dropdown -->
        <t t-call="portal.user_dropdown">
            <t t-set="_user_name" t-value="True"/>
            <t t-set="_user_name_class" t-valuef="font-weight-bold"/>
            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
            <t t-set="_link_class" t-valuef="nav-link"/>
        </t>
    </t>                                    
    <!-- Language Selector -->
    <t t-call="website.placeholder_header_language_selector">
        <t t-set="_div_classes" t-valuef="my-auto ml-lg-2 align-self-lg-center"/>
    </t>
    <!-- Call To Action -->
    <t t-call="website.placeholder_header_call_to_action">
        <t t-set="_div_classes" t-valuef="d-none d-lg-block ml-3"/>
    </t>
</div>

• 旧浏览器的Bootstrap组件兼容性问题：三星Galaxy TAB lite搭载的安卓4.4.4系统对应的Chrome版本较旧，Bootstrap的custom-control这类较新的表单组件在旧浏览器中可能存在渲染bug，加上对flex布局等现代CSS属性的支持不完善，导致头部容器的布局计算出错，最终触发头部消失。
• Odoo导航栏结构的响应式冲突：切换开关被直接放在了Odoo内置的website.navbar_nav模板片段内部，这个区域是为导航菜单设计的flex布局（flex-grow-1）。在平板的中等屏幕尺寸下，新增的开关元素会打破原有布局的空间分配，导致容器撑破或者触发collapse类的异常折叠逻辑，使得整个头部不可见。
• 自定义负边距的布局破坏：包裹开关的<span>使用了margin-top: -15px的负边距，这个样式在平板端紧凑的导航栏高度下，会破坏容器的垂直布局，可能导致元素溢出并触发父元素的溢出隐藏规则，进而让头部整体消失。

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