Question

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

我试图从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：未定义prop

if（$（'。box'）=== prop（'：hidden'））{

要检查某些内容是否不可见，请使用.is（“：visible”））在你的代码中是这样的：

$(function() {

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

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

}(jQuery));

Bootstrap定制响应式设计

2 个答案: