Question

我需要使用bootstrap 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"

Answer 1

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

void recurseManifest(ptree &pt, int lvl)
{
  for (ptree::iterator current = pt.begin(); current != pt.end();)
  {
    try
    {
        std::cout << current->second.get<std::string>("<xmlattr>.attribute") << std::endl;
    }
    catch(const boost::property_tree::ptree_bad_path &err)
    {
        std::cerr << err.what() << std::endl;    
    }
    assets = recurseManifest(current->second, lvl++);
    ++current;
  }
}

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行代码

使用父div大小为bootstrap响应网格系统

2 个答案: