[英]Unexpected behaviour display: block;
我正在使用粉底5
layout.html.twig:
...
{% block top %}
<div class="row" style="max-width: none !important;">
<nav class="top-bar">
<a href="#" style="margin-left: 40px">
{% image 'bundles/delivveweb/images/Logo_Delivve.png' %}
<img src="{{ asset_url }}">
{% endimage %}
</a>
<section class="right top-bar-section top-bar-section-layout">
<!-- Right Nav Section -->
<ul>
<li><a class="right-off-canvas-toggle" href="#">NOTIFICAÇÕES</a></li>
<li><a class="right-off-canvas-toggle" href="#">PERFIL</a></li>
</ul>
</section>
</nav>
</div>
<aside class="right-off-canvas-menu box-shadow">
<ul class="off-canvas-list">
<li><label>PERFIL</label></li>
<li><a href="#">EDITAR PERFIL</a></li>
<li><a href="#">ALTERAR SENHA</a></li>
<li><a href="#">LOGOFF</a></li>
</ul>
</aside>
{% endblock %}
...
发生的是,当我将屏幕大小调整为手机大小时,菜单消失了,我意识到这是因为<a class="right-off-canvas-toggle" href="#">
具有display: block
,具有一个在css中使用某些东西的解决方案:
@media (max-width: 40em) {
.top-bar-section ul li > a {
display: none;
}
}
但是,如果可能的话,还需要另一种解决方案,因为对于这种视觉效果:
.top-bar-section-layout li a:not(.button):hover {
background-image: url('../images/laranja_active_top_full.png') !important;
}
准确display: block
不是图像经过调整大小,也不是整个菜单栏的大小
谢谢!!!
<nav class="top-bar top-bar-layout" data-topbar role="navigation">
<ul class="title-area">
<a href="{{ path('default_target') }}" style="margin-left: 40px">
{% image 'bundles/delivveweb/images/Delivve_logo.png' %}
<img src="{{ asset_url }}" style=" margin-top: 5px; height: 45px">
{% endimage %}
</a>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section top-bar-section-layout">
<!-- Right Nav Section -->
<ul class="right">
<li>
<a id="view_central" href="{{ path('notifications') }}#home">
{% image 'bundles/delivveweb/images/icon_central.png' %}
<img id="central" src="{{ asset_url }}">
{% endimage %}
</a>
</li>
<li class="has-dropdown">
<a id="view_notification">
{% image 'bundles/delivveweb/images/icon_alerta.png' %}
<img id="alert_notification" src="{{ asset_url }}">
{% endimage %}
</a>
<ul class="dropdown scroll-menu">
{% include 'DelivveWebBundle:Notification:show_all.html.twig' with {'notifications': notifications, 'field': "li"} %}
</ul>
</li>
<li class="has-dropdown">
<a class="right-off-canvas-toggle" href="{{ path('edit_user', {'realname': owner.realname} ) }}">
<img src="{{ asset(owner.getPictureWeb()) }}" class="img-perfil-mini active-img">
<img src="{{ asset(owner.getPictureUrl()) }}" class="img-perfil-mini hidden-img">
{% image 'bundles/delivveweb/images/icon_perfil.png' %}
<img src="{{ asset_url }}" class="img-perfil-mini hidden-img"/>
{% endimage %}
</a>
<ul class="dropdown scroll-menu">
<li><a href="{{ logout_path('web') }}">LOGOFF</a></li>
</ul>
</li>
</ul>
</section>
</nav>
我最终放弃了解决方案,将按钮保留在响应菜单上。 现在,当屏幕是tamnho手机时,由于段落<li class="toggle-topbar menu-icon"> <a href="#"> <span> </span> </a> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.