Javascript 基于父级的触发响应'；s元素宽度不在窗口DOM上'；s宽度

我想触发引导的响应方法，当其父容器处于一定大小时，子容器将相应地响应

i、 e如果容器是

<1200

，子元素将转换为 MD而不是仅仅停留在LG

对于名为

#页面内容包装器

单击

切换菜单

按钮，使

#页面内容包装

成为引导中被视为MD的

950

像素，表单也应转换为MD，但保留为LG

单击

切换菜单

按钮后，这里是我的预期输出。

#页面内容包装

小于1200，即MD，则 子元素转换为MD

---

恐怕你得用javascript的方式。媒体查询无法知道元素的维度

设置切换时，可以使用javascript/jquery删除一些类，具体取决于新元素的宽度是小于还是大于断点

但是，这样做会丢失媒体查询功能，因此在调整窗口大小时，它将不再响应。您也可以通过监听

onresize

事件来避免这种情况

这就是我想到的： 小提琴：

注意，我将

.respond parent

类添加到需要响应其父级大小的元素中

它也不是最干净的解决方案，但在您提供的示例中，它是有效的。如果事情变得更复杂，则需要不同的类，如

。根据所需的宽度，响应父类

Javascript

/* Latest compiled and minified JavaScript included as External Resource */

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

function checkWidth() {
  var wrapperWidth = $('#page-content-wrapper').outerWidth();
  var $responsiveParent = $('.respond-parent');
  $("#page-content-wrapper h2").text("The width for the #page-content-wrapper is " + wrapperWidth);

  alert('checking width: ' + wrapperWidth);
  if (wrapperWidth >= 1200) {
    $responsiveParent.attr('class', 'respond-parent col-lg-12');
  } else if (wrapperWidth >= 992) {
    $responsiveParent.attr('class', 'respond-parent col-md-8');
  } else if (wrapperWidth >= 768) {
    $responsiveParent.attr('class', 'respond-parent col-sm-6');
  } else {
    $('.respond-parent').attr('class', 'respond-parent col-xs-12');
  }
}

$(document).ready(function() {
  var wrap = $("#page-content-wrapper").outerWidth();

  $(window).resize(checkWidth);
  $('#wrapper').bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', checkWidth);
});

现在试试这个


我删除了
位置：绝对在
#页面内容包装上
并删除了侧边栏的
切换类
，因此最初侧边栏应该是隐藏的
感谢您的回复。然而，我并没有真正理解最后一行代码。为什么它出现在
#wrapper
和**transitionend**上？请注意，meIt确保在菜单滑入后执行
checkWidth（）
，以便在动画后检查宽度。如果直接执行，将在动画完成之前获得元素宽度，因此它将比结束状态更宽/更窄。侦听器位于
#wrapper
上，因为您在CSS文件中定义了转换。请使用console.log。警报很烦人。您是否尝试在
上添加
col-md-12
嗨，先生，侧边栏最初是否隐藏并不重要。对不起，我没有解释清楚。如果#页面内容包装器（父项）调整其宽度，则表单输入（子项）应相应地进行转换。i、 e#页面内容包装器为865=>输入表单应转换为SM#页面内容包装器为615=>输入表单应转换为XS fiddle，尽管此解决方案可能是正确的，但我需要其他方法。