Question

假设我们都知道某些引导类会在屏幕达到一定宽度时崩溃（例如，2个col-md-6将在较大的屏幕上并排，而另一个在较小的屏幕上则在另一个的顶部）。

我想知道的是，当列崩溃时，我怎么能找到（使用jQuery或普通的旧JS）？我一直在思考和考虑使用宽度，但据我所知，BS在许多情况下没有明确指定宽度，所以我有点丢弃它。其次我虽然使用浮动属性，但我无法使用jQuery工作。

有什么建议吗？

非常感谢

Answer 1

扩展skelly所说的内容，您可以检查窗口宽度以查看what size window bootstrap is calculating。

xs = width < 768px
sm = width ≥ 768px
md = width ≥ 992px
lg = width ≥ 1200px

元素是否堆叠取决于您分配给包含元素的类。因此，如果窗口宽度为1200px或更小，则会在lg - 类别元素上进行堆叠，在md - 992px或更低等级的元素上进行堆叠等。

Answer 2

这是另一种方式：

获取父行并获得宽度。
获取所有（其他）孩子并获得他们的总宽度。

比较它们。

var row_width = 0;
var children_width = 0;
var $row = $('.yourclass').parents('.row').first(); // get the row
if ($row && $row.length != 0) {
    row_width = $row.width();
    $row.children().each(function() {
        if ($(this).length != 0) {
            children_width += $(this).width();
        }
    })
}

if (row_width < children_width) {
    // do something
}

Answer 3

您可以检查窗口宽度。在768像素处堆叠Bootstrap div ..

$(window).resize(function() {
  if ($(this).width() < 768) {
    console.log("stacked..");
  }
});

演示：http://bootply.com/100820

如何确定Bootstrap 3列是否已堆叠

3 个答案: