在引导响应网格系统中使用父div大小

Question

我需要使用引导12列网格来根据父div的大小获得响应表单。

例如，无论屏幕大小如何，内容都需要查看div A的宽度，并将引导程序的响应设计建立在该宽度的基础上。

我的目标是使我的响应设计基于模态窗口的大小(在dhtmlx中)。如果用户调整了模态窗口的大小，则行应该遵循规则(例如col-xs-12、col 6等，但根据模态窗口的大小而不是屏幕)。

这把小提琴显示了一个模态窗口与一些引导形式在里面。我需要表单响应模态表单的大小，而不是屏幕大小。

class="col-xs-12 col-sm-6"

Answer 1

正如@makshh在评论中提到的，现在似乎不可能做到这一点。我找到的唯一方法是@tsdexter从另一个堆栈溢出问题上找到的：

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
  });
});

Answer 2

我刚刚设法使网格系统在一个模态 act中响应模式的断点在引导4与scss。由于模态的最大宽度是在某些断点上自动响应的，因此我们需要在这些断点上为特定的模式大小(sm、md、lg、xl)生成新的css，这就超过了Bootstrap的css媒体查询。

只需将所有内容复制/粘贴到一个单独的scss文件中，激活它就可以了。

// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
@mixin make-modal-grid-columns($breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @for $i from 1 through $grid-columns {
                .col#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

.modal {
    // Overrules all .col css inside .modal-sm to a single col
    .modal-sm {
        @include make-modal-grid-columns((
            xs: 0
        ));
    }

    // modal-md (no specific class is also modal-md)
    @include make-modal-grid-columns((
        sm: $breakpoint-sm
    ));

    .modal-lg {
         @include make-modal-grid-columns((
             md: $breakpoint-lg
         ));
     }

    .modal-xl {
        @include make-modal-grid-columns((
            md: $breakpoint-lg,
            lg: $breakpoint-xl
        ));
    }
}

FYI:它生成350行代码