我想在我的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>
1条答案
按热度按时间deyfvvtc1#
您可以尝试将拨动开关放在
navbar_nav
之外。如下所示: