css 如何在Odoo网站中正确添加拨动开关

azpvetkf  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(150)

我想在我的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>

它在笔记本电脑上运行完美,但当我在平板电脑上试用时,标题消失了。
在笔记本电脑上:enter image description here
平板电脑:enter image description here
我没有使用任何CSS,什么原因使标题消失在平板电脑上?
在平板电脑上使用谷歌浏览器三星Galaxy TAB建兴,安卓版本4. 4. 4
我尝试了另一个拨动开关代码,同样的问题。
我在平板电脑iPad上试过,同样的问题。
下面是完整的代码:

<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>
deyfvvtc

deyfvvtc1#

您可以尝试将拨动开关放在navbar_nav之外。如下所示:

<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>
        <!-- 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>
    <!--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>
    <!-- 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>

相关问题