[英]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.