0

尝试编写一个小脚本来添加/删除基于窗口的类，

任何帮助，将不胜感激。

<script type="text/javascript">
  $(document).ready( function() {
    if ($(window).width() < 500) {
     $('.single-post-rating').removeClass('col-xs-3');
     $('.single-post-rating').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9');
     $('.guide-excerpt').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3');
     $('.single-post-rating').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9');
     $('.guide-excerpt').removeClass('col-xs-12');
    }
  });
</script>
4

2 回答 2

0

我想你是在视口宽度之后。

您可以使用

var viewPortWidth = document.documentElement.clientWidth;

顺便说一句，您可以仅通过 CSS 媒体查询来完成许多良好的响应式布局。

于 2013-09-19T21:54:00.757 回答
0

如果您想继续走这条路，这是管理窗口宽度的最佳解决方案之一：添加一个带有 min-with 属性的控件 css 类并将该类分配给您的容器

CSS：

.mediaquerycontrol {
    min-width: 0px;
}

@media (min-width: 992px) {

    .mediaquerycontrol {
        min-width: 992px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

    .mediaquerycontrol {
        min-width: 768px;
    }
}
@media (min-width: 1200px) {

    .mediaquerycontrol {
        min-width: 1200px;
    }
}

html:

<body>
  <div class="container mediaquerycontrol">
...

javascript:

<script type="text/javascript">
  $(document).ready( function() {
    var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, ''))

    if (pageWidth  < 500) {
     $('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
    }
  });
</script>

但我的建议是使用引导程序的功能，如果您需要较小的列，那么您可以默认增加列数（例如，如果您使用的是 2.3.2 版本，则从 12 增加到 24）

http://getbootstrap.com/2.3.2/customize.html

于 2013-09-19T22:36:18.047 回答