Question

请仔细阅读问题

使用引导程序时，请考虑以下情况：col-lg-6适用于large屏幕尺寸，col-sm-12适用于小屏幕。

演示标记是

 <div class="col-lg-6 col-sm-12">

     <!--some content -->

 </div>

除非屏幕尺寸为col-sm-12，否则不会应用SMALL中定义的规则，因此当用户调整屏幕和{{1}中定义的规则时，我希望使用jquery执行某些操作适用于当前元素。不想使用col-sm-12解决方法来测量屏幕尺寸！

Answer 1

在您的css文件中编写您自己的媒体查询：

@media (max-width: 768px) {
   .contentShown{
       display:none;
     }

    .contenthidden{
       display:block;
     }
}

至于预先形成一个动作，比如在窗口调整大小上加载新内容，那么你必须监听事件，当大小是所需宽度时，你需要通过ajax操作并加载新内容：

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

here

的完整答案

Answer 2

bootstap网站有默认断点http://getbootstrap.com/css/#grid-media-queries。这会告诉您应用col-sm-12和col-lg-6的尺寸。

就隐藏和显示元素而言，您必须创建类来执行此操作，然后使用媒体查询引导程序使用它们将它们添加到样式表。

Answer 3

如果您正在使用jquery，那么使用is()函数来检查包装器的类或页面的任何元素 if ($(".wrapper").is(".col-sm-12")) { // do an action here };

我的代码看起来很基本希望有帮助

Javascript＆amp; CSS媒体查询：应用于元素的CSS类

3 个答案: