Question

在我们开发或调试响应式设计时，可能非常有用，请参阅指示器以显示应用了哪些@ media-query。即（xs，sm，md或lg）。

我想知道，我怎么能以简单的方式展示哪些@ media-query在bootstrap中是活跃的？

Answer 1

所以，我玩了这个使用visible-[xs|sm|md|lg]类的代码片段。

此外，我添加了以下额外的CSS，它还允许您查看横向和纵向媒体查询的指示器。

横向和纵向指示符所需的额外样式。

＆＃13;

.visible-landscape, 
.visible-portrait {
   display: block;
}

@media (orientation: portrait) {
    .visible-landscape {
       display: none !important;
    }
}

@media (orientation: landscape) {
    .visible-portrait {
         display: none !important;         
    }
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style='position:fixed; z-index: 10001; top:0; left: 0; background: black; color: white;'>
  <span class="visible-xs">XS</span>
  <span class="visible-sm">SM</span>
  <span class="visible-md">MD</span>
  <span class="visible-lg">LG</span>
  <span class='visible-portrait' style="background: red; color: yellow;">OP</span>
  <span class='visible-landscape' style="background: red; color: yellow;">OL</span>
</div>

＆＃13;

什么bootstrap @ media-query现在有效？

1 个答案:

横向和纵向指示符所需的额外样式。