为 Bootstrap 响应式网格系统使用父级 div 大小

Question

我需要使用 bootstrap 12 列网格来获取基于父 div 大小的响应式表单。

举个例子，无论屏幕大小如何，内容都需要看到 div A 的宽度，并将引导程序的响应式设计基于该宽度。

我的目标是将我的响应式设计基于模态窗口的大小（在 dhtmlx 中）。如果用户调整模式窗口的大小，则该行应遵循规则（例如 col-xs-12、col-sm-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

我刚刚设法在 Bootstrap 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
        ));
    }
}

仅供参考：它生成 350 行代码

可以在 Bootstrap 4 中使用这样的块进行测试

<div class="modal" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-8">test</div>
                </div>
            </div>
        </div>
    </div>
</div>

然后如果你用 devtools 检查它，CSS 看起来像这样