Question

<style>
@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content{ display: none; }  /* show it on large screen */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content{ display: block; }   /* hide it small screens */
}
<style>
<div id="my-content">

此代码有效但我想添加一个按钮以显示/隐藏此内容＆＃34; my-content＆＃34;在小型设备上。我不想在大显示屏中显示此按钮。此按钮仅显示在小屏幕上。我想将此代码用于引导站点。

Answer 1

Bootstrap已经有类来隐藏东西/让它们可见。检查这些是否在您的样式表中。 http://getbootstrap.com/css/

.visible-xs- ，。visible-sm - ，。visible-md- ，。visible-lg - .hidden-xs，.hidden-sm，.hidden-md，.hidden-lg

Answer 2

你刚刚做了与你想要的相反的事情。这是一个快速解决方法：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content{ display: block; }  /* show it on smaller screen */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content{ display: none; }   /* hide it on larger screens */
}

<div id="my-content">
Shows only on screens having max width of 400px. 
Resize your browser's width to see changes
</div>

显示和隐藏取决于屏幕大小

2 个答案: