我尝试在modal
弹出窗口中使用bootstrap-5
网格系统。为了进行测试,我简单地从https://getbootstrap.com/docs/5.0/components/modal/中提取了主模态示例,并在modal-body
中添加了网格示例:
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
....
结果:网格没有得到任何尊重。但为什么呢?
https://jsfiddle.net/3041fLwk/
2条答案
按热度按时间vyswwuz21#
问题是bootstrap没有在modal上实现responsive。它依赖于
media
查询的父窗口。如果你创建一个有限宽度的小框,也是一样。要在modal上实现responsive,需要使用
iframe
,或者自己在modal上设置断点nr7wwzry2#
我认为您的问题来自于您对
ms-auto
的使用-当我删除所有的ms-auto
类时,网格按预期工作。