元素未正确包含在 Internet Explorer 11 的卡片页脚中

Question

我创建了一个包含在Bootstrap 4 Card 中的表单，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row card">
        <div class="col-12 card-body">
            Example text in the card body
        </div>

        <div class="col-12 card-footer">
            <div class="row">
                <div class="alert alert-warning col-12">Example alert box</div>
            </div>

            <div class="row form-group">
                <div class="col-6">
                    <button type="button" class="btn btn-block btn-primary">Save form</button>
                </div>
            </div>
        </div>
    </div>
</div>

通常的内容放在div.card-body 中，我在div.card-footer 中放置了一个警告框以及我的“保存表单”按钮。

这在 Chrome 63 和 Firefox 58 中有效。但是在 Internet Explorer 11 中，保存按钮和警报未正确包含在卡片页脚中，它们会溢出 div (screenshot)。

我该如何解决这个问题？

Answer 1

可以通过删除col-12 类来解决这个问题，我将它与card-footer 结合使用：

<div class="col-12 card-footer">

变成

<div class="card-footer">

Bootstrap 的 col-12 类添加了这个 CSS

-ms-flex: 0 0 100%; 
flex: 0 0 100%;

到div。切换这些 CSS 定义，或者将第三个参数 (flex-basis) 100% 替换为 auto 或固定值，似乎也可以解决这个特定问题，尽管我不确定为什么以及副作用是什么可能是。