将父 div 大小用于引导响应式网格系统答案

【问题标题】：Use parent div size for bootstrap responsive grid system将父 div 大小用于引导响应式网格系统
【发布时间】：2016-10-30 21:49:31
【问题描述】：

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

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

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

This fiddle show a modal window with some bootstrap form inside.我需要表单响应模态表单的大小，而不是屏幕大小。

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

【问题讨论】：

你试过container-fluid类吗？这将是它内部的 100%...
我创建了another fiddle 向您展示这也不起作用。可以看到，如果放大模态窗口，仍然只有一列，但是如果放大整个页面，即使不放大模态窗口，它也会分成两列。 col-*-* 仍然不是基于模态窗口。这是个问题。
这在 CSS 中是不可能的，你可以在 JavaScript 中做到（检查窗口的宽度调整大小并在不同的大小上应用不同的类，然后在 CSS 中设置样式）。也可以考虑stackoverflow.com/questions/12251750/…。
Best way to make Bootstrap responsive based on parent div?的可能重复

标签： css twitter-bootstrap

【解决方案1】：

正如@makshh 在评论中提到的那样，现在似乎不可能做到这一点。我找到的唯一方法是来自@tsdexter 的another stack overflow question：

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

【讨论】：

【解决方案2】：

我只是设法使 模态框内的网格系统 动作 响应于带有 scss 的 Bootstrap 4 中模态框的断点。由于模态的最大宽度在某些断点上会自行响应，因此我们需要在这些断点上为特定的模态大小（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 行代码

【讨论】：