实现始终显示响应式内容

Question

我正在创建要响应的用户界面。 我有三个按钮，在用户屏幕尺寸指示时，我想移到下拉菜单中。

我的问题是，无论屏幕大小如何，我一直用来显示下拉菜单的“按主题显示”助手总是显示。

物化助手“隐藏并隐藏”正在工作，并且内容被正确隐藏，但是当屏幕为中等大小且屏幕中等时，我无法使下拉菜单仅显示 下来。

<div class="entry">
     <div class="icon> icon for  user </div>
     <div class="name"> user name </div>


     <ul class="hide-on-med-and-down">
         <div class="button>yes</div>
         <div class="button>no</div>
         <div class="button>maybe</div>
     </ul>



     <ul class="show-on-med-and-down">
        <div class="dropdown"> dropdown menu</div>
     </ul>


</div>

我希望这段代码在任何情况下都可以显示下拉按钮或三个按钮的排他性。但是，如您从我所附的屏幕截图中所见，始终显示下拉菜单占位符。

large view

small view

谢谢您的时间。

Answer 1

当屏幕宽度> 600px时，

“ med-and-down” css类仅设置显示属性。

您需要将项目的样式设置为style =“ display：none;”

或将类别更改为“仅隐藏在大屏幕上”（建议）。