jquery - Bootstrap 自定义响应式设计

Question

假设我连续有 3 个 div 列（span4每个），当屏幕缩小到平板电脑尺寸以下时，最后一列被隐藏。发生这种情况时，我想用其他 2 列的 div 类替换，span6这样我就看不到任何隐藏的空白空间。

我试图从 jQuery 中控制它，但我似乎错过了一些东西。

$(function() {

  var $resizable = $('.resize');

  if($('.box') === prop(':hidden')) {
    $resizable.toggleClass('span6');
  }

}(jQuery));

这是JS BIN

Answer 1

不完全符合您的要求，但您可以使用媒体查询来调整列宽。

像这样：

@media (max-width: 767px) { /* phone */
  .row-fluid .custom-column {
    /* values from .span6 */
    width:48.717948717948715% !important;
    *width:48.664757228587014% !important;
  }
}

至于javascript，试试这个：

var $resizable = $('.resize');

if(!$('.box').is(":visible")) {
  $resizable.removeClass('span4').addClass('span6');
} else {
  $resizable.removeClass('span6').addClass('span4');
}

Answer 2

您的 javascript 在 firebug 控制台上显示错误：

ReferenceError：未定义道具

if($('.box') === prop(':hidden')) {

要检查某些内容是否不可见，请在代码中使用 .is(":visible")) 是这样的：

$(function() {

  var $resizable = $('.resize');

  if(!$('.box').is(":visible")) {
    $resizable.toggleClass('span6');
  }

}(jQuery));