具体化始终显示响应式内容

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>

我希望此代码在任何情况下都能显示下拉按钮或三个按钮的排他性。但是，正如您从我随附的屏幕截图中看到的那样，下拉菜单占位符始终显示。

大视野

小视图

提前

感谢您抽出宝贵时间。

Answer 1

"show-on-med-and-down" css 类只是在屏幕宽度为> 600px 时设置显示属性。

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

或者将类更改为"仅大型隐藏"(建议(。